Skip to content

The first test of example-react-router fails #897

Open
@FahadAminShovon

Description

@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
Screenshot 2021-07-24 at 5 50 00 PM

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();
});

Screenshot 2021-07-24 at 5 53 18 PM

Activity

eps1lon

eps1lon commented on Jul 24, 2021

@eps1lon
Member

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

FahadAminShovon

FahadAminShovon commented on Jul 24, 2021

@FahadAminShovon
Author

sure, will send a pr

alexkrolick

alexkrolick commented on Jul 26, 2021

@alexkrolick
Collaborator

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

eps1lon commented on Jul 27, 2021

@eps1lon
Member

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

alexkrolick commented on Jul 28, 2021

@alexkrolick
Collaborator
ryan-sandy

ryan-sandy commented on Nov 29, 2021

@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

MatanBobi commented on Apr 23, 2022

@MatanBobi
Member

Hi, is this one still relevant for RR v6?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Participants

      @alexkrolick@ryan-sandy@eps1lon@MatanBobi@FahadAminShovon

      Issue actions

        The first test of example-react-router fails · Issue #897 · testing-library/testing-library-docs