Testing does not work properly with nested route

[chipueatfast]

• react-testing-library version: 5.9.0
• react version: 16.8.1
• node version: 8.10.0
• yarn version: 1.7.0

Relevant code or config:

...
const Home2 = () => <div>You are home again</div>
...
// In App component
<Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about">
          <Route exact path="/home2" component={Home2} />
        </Route>
        <Route component={NoMatch} />
</Switch>
...
test('react-router landing on a suppose-to-be Home2 page', () => {
  const { container } = renderWithRouter(<App />, {
    route: '/about/home',
  })
  // normally I'd use a data-testid, but just wanted to show this is also possible
  expect(container.innerHTML).toMatch('You are home again')
})

What you did:

I copied the example on 'react-router' and run, it went smoothly. But when I add a nested route, the routing seem to stop at the parent route.

What happened:

Link to Example: https://testing-library.com/docs/example-react-router

The test result is shown like this:

  expect(received).toMatch(expected)

    Expected value to match:
      "You are home again"
    Received:
      "<div><a href=\"/\">Home</a><a href=\"/about\">About</a><div data-testid=\"location-display\">/about/home2</div></div>"

Problem description:

Can someone tell me what I did wrong or this is a limitation at the moment

[bcarroll22]

👋 howdy. Pretty sure the issue you’re running in to is because in React Router you aren’t supposed to nest routes like this. Hard to tell without the whole example, but I’m fairly confident that’s the issue.

Try nesting your route inside the about page component instead of under the about route and you should be good to go 👍

[kentcdodds]

Closing this for inactivity. If someone wants to work on it in the future feel free to open a new issue. Thanks!