← Back to TIL list

Testing thrown redirects in React Router v6

I had to re-wire some tests today. In the app I'm working on, we are moving to using the React Router data features.

In the process, I transferred an AuthCheck component to use throw redirect(…) when checking for route allowance/user role.

Today, I wrote tests for this auth check method. Since we're throwing an actual Response, I wrote a small wrapper for each test like so:

const getAuthCheckResponse = async (authCheckInput) => {
  let response;
  let thrown;
  try {
    response = await pageAuthCheck(authCheckInput);
  } catch (error) {
    thrown = error;
  }
  return { response, thrown };
};

This way, I can check for the response status code and the thrown error. I could also check for the response body, but the method only reacts in negative cases, so I don't need to check for the response body.

it("throws an error and redirects if token is missing", async () => {
  const { response, thrown } = await getAuthCheckResponse({});
  expect(response).toBeUndefined();
  expect(thrown).toBeDefined();
  expect(thrown.headers.get("Location")).toBe(`/${LOGIN}`);
});

It still feels a bit weird to throw a Response, but within the context of the data router – where it is all about Request/Response handling, it totally makes sense.