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?