Open
Description
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:
- copy paste the app.test.js from here
- run tests
Expected behavior All three test cases should pass
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();
});
Metadata
Metadata
Assignees
Labels
No labels
Activity
eps1lon commentedon Jul 24, 2021
This looks simpler anyway and
MemoryRouter
is the recommended approach for testing anyway. Want to send a PR that documentsMemoryRouter
instead?FahadAminShovon commentedon Jul 24, 2021
sure, will send a pr
alexkrolick commentedon Jul 26, 2021
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 commentedon Jul 27, 2021
Shouldn't you use
useLocation
anyway? Especially because accessingwindow.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 commentedon Jul 28, 2021
Previous discussion: remix-run/react-router#7169 (comment)
ryan-sandy commentedon Nov 29, 2021
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 commentedon Apr 23, 2022
Hi, is this one still relevant for RR v6?