Router-Redux: fireEvent is not changing the route

[karimjavith]

• react-testing-library version:5.6.0
• react version:16.8.1
• node version:8.12.0
• npm (or yarn) version:6.4.1

Relevant code or config:

import React from 'react'
import {withRouter} from 'react-router'
import {createStore} from 'redux'
import {Provider, connect} from 'react-redux'
import {Link, Route, Router, Switch} from 'react-router-dom'
import {createMemoryHistory} from 'history'
import {render, fireEvent, cleanup} from 'react-testing-library'

afterEach(cleanup)

const About = () => <div>You are on the about page</div>
const Home = () => <div>You are home</div>
const NoMatch = () => <div>No match</div>

const LocationDisplay = withRouter(({location}) => (
  <div data-testid="location-display">{location.pathname}</div>
))

function App() {
  return (
    <div>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route component={NoMatch} />
      </Switch>
      <LocationDisplay />
    </div>
  )
}

const ConnectedApp = connect(state => ({}))(App)

// Ok, so here's what your tests might look like

// this is a handy function that I would utilize for any component
// that relies on the router being in context
function renderWithRouter(
  ui,
  {route = '/', history = createMemoryHistory({initialEntries: [route]})} = {},
  {initialState = {}, store = createStore(() => {}, initialState)} = {},
) {
  return {
    ...render(
      <Provider store={store}>
        <Router history={history}>{ui}</Router>
      </Provider>,
    ),
    // adding `history` to the returned utilities to allow us
    // to reference it in our tests (just try to avoid using
    // this to test implementation details).
    history,
    store,
  }
}

test('render home page', () => {
  const {container} = renderWithRouter(<ConnectedApp />)
  // normally I'd use a data-testid, but just wanted to show this is also possible
  expect(container.innerHTML).toMatch('You are home')
})
test('render about page on route navigation', () => {
  const {container} = renderWithRouter(<ConnectedApp />, {
    route: '/about',
  })

  // normally I'd use a data-testid, but just wanted to show this is also possible
  expect(container.innerHTML).toMatch('You are on the about page')
})
test('render about page on click navigation', () => {
  const {container, getByText} = renderWithRouter(<ConnectedApp />)

  const leftClick = {button: 0}
  fireEvent.click(getByText(/about/i), leftClick)
  // normally I'd use a data-testid, but just wanted to show this is also possible
  expect(container.innerHTML).toMatch('You are on the about page') // fails
})

What you did:

I am using redux and router to test my component. The navigation works via setting the route and the fireEvent is not triggering the route and renders same previous component. In other case, the fireEvent works and the route navigation doesnt. Please help

What happened:

Expected value to match:
"You are on the about page"
Received:
"

<a href="/">Home<a href="/about">About

You are home

<div data-testid="location-display">/

"

Reproduction:

https://codesandbox.io/s/ypwzjqwjrj

Problem description:

Suggested solution:

[karimjavith]

Can anyone help, please?

[alexkrolick]

@karimjavith I think it's a Codesandbox issue - it works when I download your repro sandbox and run it.

EDIT: wrong test

[karimjavith]

@alexkrolick The test in question is react-redux-router. could you please try it?

[alexkrolick]

@alexkrolick The test in question is react-redux-router. could you please try it?

OK. That one fails.

[karimjavith]

Not sure what is going wrong. The event listeners are not changing the location while navigation and vice versa.

[alexkrolick]

The examples have their own repo - https://github.com/kentcdodds/react-testing-library-examples

Looks like the Codesandbox in general is failing in several files in the tests directory, so it's hard to diagnose exactly what the problem is

[kentcdodds]

The codesandbox has been fixed and all the tests are passing. Hopefully that helps.

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

[karimjavith]

Found out. I did not wrap the parent component with WithRouter() which was causing the problem.
Thanks, everyone for your comments 👍