How to test components using new react router hooks?

Question

Until now, in unit tests, react router match params were retrieved as props of component. So testing a component considering some specific match, with specific url parameters, was easy : we just had to precise router match's props as we want when rendering the component in test (I'm using enzyme library for this purpose).

I really enjoy new hooks for retrieving routing stuff, but I didn't find examples about how to simulate a react router match in unit testing, with new react router hooks ?

score 64 · Accepted Answer · edited Mar 23 '21 at 13:40

64

The way I ended up solving it was by mocking the hooks in my tests using jest.mock:

// TeamPage.test.js
jest.mock('react-router-dom', () => ({
  ...jest.requireActual('react-router-dom'), // use actual for all non-hook parts
  useParams: () => ({
    companyId: 'company-id1',
    teamId: 'team-id1',
  }),
  useRouteMatch: () => ({ url: '/company/company-id1/team/team-id1' }),
}));

I use jest.requireActual to use the real parts of react-router-dom for everything except the hooks I'm interested in mocking.

edited Mar 23 '21 at 13:40

Mario Petrovic

4,128
5
26
43

answered Oct 01 '19 at 08:36

Markus-ipse

5,406
2
25
32

1

Works like a charm, and this pattern will be usefull for many cases in my project to mock precises points of external modules without breaking everything :) – Remi Deprez Oct 08 '19 at 15:47
1

I never knew about `jest.requireActual` this is greatly helping ! – SuperMarco Feb 18 '20 at 08:14
1

what if i have to pass different companyId in same test file – user3106347 Oct 06 '20 at 13:00
If you need different params for each test in a test suite I would recommend using spyOn as mentioned here: https://stackoverflow.com/a/61665964/2201223 – Fraser Crosbie Dec 11 '20 at 17:22

score 58 · Answer 2 · edited May 04 '20 at 12:23

58

I looked at the tests for hooks in the react-router repo and it looks like you have to wrap your component inside a MemoryRouter and Route. I ended up doing something like this to make my tests work:

import {Route, MemoryRouter} from 'react-router-dom';

...

const renderWithRouter = ({children}) => (
  render(
    <MemoryRouter initialEntries={['blogs/1']}>
      <Route path='blogs/:blogId'>
        {children}
      </Route>
    </MemoryRouter>
  )
)

Hope that helps!

edited May 04 '20 at 12:23

Mr. Nun.

707
10
26

answered Oct 02 '19 at 17:05

Catalina Astengo

711
4
4

4

The problem is mocking the new `react-router-dom` hooks. Wrapping your component in a MemoryRouter is definitely what you want to do though for any component under test that is within a router. There are numerous patterns for creating a reusable wrapper such as https://testing-library.com/docs/example-react-router – Jens Bodal Nov 13 '19 at 09:30
3

This answer should be accepted, less intrusive, more correct – Mr. Nun. May 03 '20 at 08:46
Thank you for this answer and your comment @JensBodal. Of course there are clear examples in the documentation but I always seem to jump to SO first lol! – thul Jan 27 '21 at 21:28

score 22 · Answer 3 · edited Mar 23 '21 at 13:40

22

In your component use hooks as below

import {useLocation} from 'react-router';

const location = useLocation()

In your test spy on reactRouter Object as below

import routeData from 'react-router';

const mockLocation = {
  pathname: '/welcome',
  hash: '',
  search: '',
  state: ''
}
beforeEach(() => {
  jest.spyOn(routeData, 'useLocation').mockReturnValue(mockLocation)
});

edited Mar 23 '21 at 13:40

Mario Petrovic

4,128
5
26
43

answered Jan 07 '20 at 06:15

Suchin

269
3
5

2

nice one, the above help by using spyOn Thanks @suchin – Brendon Feb 19 '20 at 02:59
Thanks! It works! how did you learn about `routeData`? I can't find it in the react-router docs. – Gundam Meister May 21 '20 at 01:04
2

Thanks small syntax correction: `beforeEach(() => { jest.spyOn(routeData, 'useLocation').mockReturnValue(mockLocation) });` – makstaks Nov 19 '20 at 15:06
@GundamMeister the name doesn't matter since is the default export from 'react-router's – Alexandre Piva Mar 13 '21 at 19:19

score 3 · Answer 4 · edited May 29 '20 at 21:59

3

If you're using react-testing-library for testing, you can get this mock to work like so.

jest.mock('react-router-dom', () => ({
    ...jest.requireActual('react-router-dom'),
    useLocation: () => ({ state: { email: 'school@edu.ng' } }),
}));

export const withReduxNRouter = (
    ui,
    { store = createStore(rootReducer, {}) } = {},
    {
    route = '/',
    history = createMemoryHistory({ initialEntries: [ route ] }),
    } = {}
) => {
    return {
    ...render(
        <Provider store={store}>
        <Router history={history}>{ui}</Router>
        </Provider>
    ),
    history,
    store,
    };
};

You should have mocked react-router-dom before it has been used to render your component. I'm exploring ways to make this reusable

edited May 29 '20 at 21:59

autopoietic

155
5

answered Apr 14 '20 at 16:22

chidimo

1,826
2
20
33

1

I was testing a basic ionic app that used the useLocation hook. This worked perfectly. Thanks. – David May 15 '20 at 19:25
if you used CRA to create your project you could just put the jest.mock block into setupTests.js(ts) – mkim Aug 05 '20 at 13:21
Hello @chidimo, did you find a way to make this reusable? – Luis Paulo Pinto Aug 10 '20 at 22:46
I think I did. I made a post which you can find here https://www.smashingmagazine.com/2020/07/react-apps-testing-library/ – chidimo Aug 12 '20 at 08:20

score 2 · Answer 5 · answered Oct 23 '19 at 13:32

2

I am trying to get if the push function in useHistory is called by doing that but I can't get the mocked function calls...

const mockHistoryPush = jest.fn();

jest.mock('react-router-dom', () => ({
    ...jest.requireActual('react-router-dom'),
    useHistory: () => ({
      push: mockHistoryPush,
    }),
  }));

fireEvent.click(getByRole('button'));
expect(mockHistoryPush).toHaveBeenCalledWith('/help');

It says that mockHistoryPush is not called when the button has onClick={() => history.push('/help')}

answered Oct 23 '19 at 13:32

Albert Alises

668
1
5
15

jest mocks hoist the mocked module before anything else, thus your `mockHistoryPush` won't be seen at runtime. Instead, within your test, do something like `import * as ReactRouterDom from 'react-router-dom'; jest.spyOn(ReactRouterDom, 'useHistory').returnValue({ push: mockHistoryPush, })` – Jens Bodal Nov 13 '19 at 09:32
@JensBodal I just tried that and got an "TypeError: Cannot set property useHistory of [object Object] which has only a getter", will update if I find a solution – Jason Rogers Nov 17 '19 at 22:43
1

Any news on that @JasonRogers ? :'( – Albert Alises Nov 25 '19 at 11:14
I'm having the same issue currently. Seems impossible to mock / test this situation. – Alex Jan 30 '20 at 13:21
Mocking history.push is explained here: https://stackoverflow.com/questions/58524183/how-to-mock-history-push-with-the-new-react-router-hooks-using-jest – autopoietic May 29 '20 at 10:57

score -2 · Answer 6 · answered Apr 02 '20 at 17:26

If using the enzyme library, I found a much less verbose way to solve the problem (using this section from the react-router-dom docs):

import React from 'react'
import { shallow } from 'enzyme'
import { MemoryRouter } from 'react-router-dom'
import Navbar from './Navbar'

it('renders Navbar component', () => {
  expect(
    shallow(
      <MemoryRouter>
        <Navbar />
      </MemoryRouter>
    )
  ).toMatchSnapshot()
})

How to test components using new react router hooks?

6 Answers6

Linked