How to test React Router V6 Outlet using @testing-library/react

Question

I have a component that I am using in React Router v6 for managing private routes, that does some checks on an auth token, and will either render the Outlet component or will redirect to a login page.

I have -

import { Outlet } from 'react-router-dom';

export const CheckAuth = (props) => {
  const valid = ...;
  if (!valid) {
    window.location.replace(loginUrl);
    return null;
  }

  return <Outlet />;
};

and using it like -

<Route element={<CheckAuth token={authToken} />}>
   // ... private routes ...
</Route>

I can mock out window.location.replace with Jest

delete window.location;
window.location = { replace: jest.fn() };
...
render(<CheckAuth token={token} />)
expect(window.location.replace).toHaveBeenCalledWith(loginUrl);

but how can I test the Outlet component using Testing Library?

Unrelated, why are you using `window.location`? You probably want to render a redirect, i.e. `` instead of mutating the location. — Drew Reese, Jan 10 '22 at 17:15
It's an external URL which I believe react-router doesn't handle? — andy mccullough, Jan 10 '22 at 17:27

andy mccullough · Accepted Answer · 2022-08-10T12:52:32.083

If it helps anyone, I ended up just wrapping the components in the test with a react router components, and passed a dummy component as a child to Route and asserted that some fake text in that component was or was not rendered

Outside the test block -

const FakeComponent = () => <div>fake text</div>;

and for a failure scenario, where the outlet should not render -

    render(
      <MemoryRouter initialEntries={['/']}>
        <Routes>
          <Route element={<CheckAuth />}>
            <Route path="/" element={<FakeComponent />} />
          </Route>
        </Routes>
      </MemoryRouter>
    );

    expect(screen.queryByText('fake text')).not.toBeInTheDocument();

and for a success scenario, assert that the text is present -

render(
      <MemoryRouter initialEntries={['/']}>
        <Routes>
          <Route element={<CheckAuth token={correctToken}/>}>
            <Route path="/" element={<FakeComponent />} />
          </Route>
        </Routes>
      </MemoryRouter>
    );

    expect(screen.queryByText('fake text')).toBeInTheDocument();

How to test React Router V6 Outlet using @testing-library/react

1 Answers1

Linked