React Testing Library render does not work with react router dom Navigate

Question

I have a component which has a "Navigate" component inside it. I want to test this navigation. But whenever I try to render the component, the test case gets stuck and keeps on running forever.

I am using react-router-dom v6.

This is my sample code snippet.

render(
  <MemoryRouter initialEntries={['/']}>
    <Navigate to="/target" />
  </MemoryRouter>,
);

I have tried both mount method from enzyme and render method from RTL. This code snippet never produces any output. The test keep on executing forever.

Answer 1

The test code is unconditionally rendering the Navigate component which issues a navigation action. This creates a render loop.

Place the Navigate component on a route so that it is conditionally rendered.

Example:

render(
  <MemoryRouter initialEntries={['/']}>
    <Routes>
      <Route path="/" element={<Navigate to="/target" />} />
    </Routes>
  </MemoryRouter>,
);

Above the Navigate component is rendered on the home "/" that is specified in the MemoryRouter's initialEntries array prop value.