The first test of example-react-router fails

[FahadAminShovon]

the first example of example-react-router fails
to be more precise

test('full app rendering/navigating', () => {
  const history = createMemoryHistory()
  render(
    <Router history={history}>
      <App />
    </Router>,
  )
  // verify page content for expected route
  // often you'd use a data-testid or role query, but this is also possible
  expect(screen.getByText(/you are home/i)).toBeInTheDocument()

  const leftClick = {button: 0}
  userEvent.click(screen.getByText(/about/i), leftClick)

  // check that the content changed to the new page
  expect(screen.getByText(/you are on the about page/i)).toBeInTheDocument()
})

To Reproduce Steps to reproduce the behavior:

1. copy paste the app.test.js from here
2. run tests

Expected behavior All three test cases should pass

Screenshots

However I could resolve the error by rendering the App component like this

test('full app rendering/navigating', () => {
	// const history = createMemoryHistory();
	// history.push('/about');
	render(<App />, { wrapper: MemoryRouter });
	// verify page content for expected route
	// often you'd use a data-testid or role query, but this is also possible
	// verify page content for expected route
	// often you'd use a data-testid or role query, but this is also possible
	expect(screen.getByText(/you are home/i)).toBeInTheDocument();

	const leftClick = { button: 0 };
	userEvent.click(screen.getByText(/about/i), leftClick);

	// check that the content changed to the new page
	expect(screen.getByText(/you are on the about page/i)).toBeInTheDocument();
});

[eps1lon]

This looks simpler anyway and MemoryRouter is the recommended approach for testing anyway. Want to send a PR that documents MemoryRouter instead?

[FahadAminShovon]

sure, will send a pr

[alexkrolick]

I recall this was a point of contention with ReactRouter regarding the recommended approach, because you can't interop with window.location and other APIs that real apps use in conjunction with RR when using MemoryRouter.

[eps1lon]

because you can't interop with window.location and other APIs that real apps use in conjunction with RR when using MemoryRouter.

Shouldn't you use useLocation anyway? Especially because accessing window.location isn't trivial when working with concurrent rendering. Sounds to me like this is the reason they recommend using a different router component to test these incompatibilities.

Regardless, I would rather follow their advise and when they recommend a different approach, we can sync again. Otherwise we should document explicitly why we use a different approach.

[alexkrolick]

Previous discussion: remix-run/react-router#7169 (comment)

[ryan-sandy]

Hey, which version of react-router are you using? If you're using the stable version of react-router (v5) and history (v5), the tests will fail. You need to downgrade history to v4 for the route change to work.

Issue 869 documents the incompatibly. My PR to add a note about the dependency incompatibly was was rejected.

[MatanBobi]

Hi, is this one still relevant for RR v6?