React-testing-library: Router-Redux: fireEvent is not changing the route

Created on 13 Feb 2019 · 8Comments · Source: testing-library/react-testing-library

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