RR7 way of testing actions and loaders

[otatar]

Hi there,

I have just migrated one of my web app from Remix v2 to React Router 7 (framework). Everything seems to work as expected, but I have problems with testing loaders and actions. Basic idea how to test loaders an actions in Remix I have found on this article/tutorial from Sergio:
https://sergiodxa.com/tutorials/test-remix-loaders-and-actions

But it doesn't hold anymore because loaders and actions in React Router 7 return:

DataWithResponseInit<{
    defaultValues: Partial<{}>;
}> | Response

So we cannot just use res.json() or res.status() or something like: expect(res).toBeInstanceOf(Response);

How to test it in RR7?

Thanks

[markgreenwood]

Fabulous. I just started writing tests for something like this today. Really eager to see the discussion.

For context, I'm testing authentication code and I want to make sure it correctly throws or returns data and/or redirects.

[jrestall]

Is it just typescript errors you are running into? If so maybe this assert function that we use in a fully future flagged & single fetched Remix v2 app should help, since it should be similar to RR7.

export function assertIsDataWithResponseInit(
  response: unknown
): asserts response is {
  init: ResponseInit | null;
  data: unknown;
  type: string;
} {
  if (
    typeof response === "object" &&
    response != null &&
    "type" in response &&
    "data" in response &&
    "init" in response &&
    response.type === "DataWithResponseInit"
  ) {
    return;
  }

  throw new Error("Expected DataWithResponseInit");
}

Usage:

const response = await action({
  request: request,
  params: {},
  context: {}
});

assertIsDataWithResponseInit(response);

expect(response.data).toStrictEqual({
   message: {
     description: "An error occurred. Please try again later.",
  },
});

[otatar]

Hi @jrestall,

thank you for your answer. By using proposed function I can only test body of the response. Beside that, I want to test for actual response code like when I test form submission I like to test response code for HTTP 400:

const res = await action({ request, params: {}, context: {} });
expect(res).toBeInstanceOf(Response);
expect(res.status).toBe(400);
const { errors } = await res.json();

How can I do that?

[IDurward]

I am also trying to create tests and hitting this issue.

We send back different 4xx codes depending on the content, For example 401 for 'Bad Request' or 404 'Not Found'.

How do we now test that these response status codes are returned correctly?

[IDurward]

Have found the answer

const response = await usageEventAction({ request, context, params: {} })
assertIsDataWithResponseInit(response)
expect (response.init).toEqual({ status: 200 })