How to mock useHistory hook in jest?

Question

I am using UseHistory hook in react router v5.1.2 with typescript? When running unit test, I have got issue.

TypeError: Cannot read property 'history' of undefined.

import { mount } from 'enzyme';
import React from 'react';
import {Action} from 'history';
import * as router from 'react-router';
import { QuestionContainer } from './QuestionsContainer';

describe('My questions container', () => {
    beforeEach(() => {
        const historyHistory= {
            replace: jest.fn(),
            length: 0,
            location: { 
                pathname: '',
                search: '',
                state: '',
                hash: ''
            },
            action: 'REPLACE' as Action,
            push: jest.fn(),
            go: jest.fn(),
            goBack: jest.fn(),
            goForward: jest.fn(),
            block: jest.fn(),
            listen: jest.fn(),
            createHref: jest.fn()
        };//fake object 
        jest.spyOn(router, 'useHistory').mockImplementation(() =>historyHistory);// try to mock hook
    });

    test('should match with snapshot', () => {
        const tree = mount(<QuestionContainer />);

        expect(tree).toMatchSnapshot();
    });
});

Also i have tried use jest.mock('react-router', () =>({ useHistory: jest.fn() })); but it still does not work.

Proustibat · Accepted Answer · 2019-10-27T16:04:35.150

91

I needed the same when shallowing a react functional component that uses useHistory.

Solved with the following mock in my test file:

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

edited Oct 27 '19 at 16:04

answered Oct 27 '19 at 15:58

Proustibat

1,811
1
15
21

2

For those who use TypeScript, this approach may cause the "React.createElement: type is invalid — expected a string" error if the component uses `Link` and `useHistory` at the same time. Erhan's approach won't cause that issue. – Hiroki Jun 26 '20 at 05:41
15

Is there a way to capture `useHistory().push()` invocations? – taystack Aug 24 '20 at 16:57
8

But how do you spyOn useHistory function? – omeralper Oct 28 '20 at 14:10
Those who are using TypeScript may refer to this: https://stackoverflow.com/q/62774929/10959940 :) – wentjun Jan 06 '21 at 02:27
1

@proustibat, can you provide a bit elaborated example ? Also, update the example with .test.js file – Amit Kumar Jan 12 '21 at 04:09
@taystack you may want to check the answer I posted for this question ^_^ – targumon Oct 04 '21 at 20:28
@omeralper you may want to check the answer I posted for this question ^_^ – targumon Oct 04 '21 at 20:28
@targumon I solved this by scoping the jest.fn() outside the mock. It can be referenced easily this way. Mocking the router has been abstracted into a helper method already. – taystack Oct 04 '21 at 22:58

score 54 · Answer 2 · answered Nov 20 '19 at 13:15

54

This one worked for me:

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

answered Nov 20 '19 at 13:15

Erhan

1,126
8
11

1

this approach preserves the other react-router-dom functions which you may not want to mock – Pnar Sbi Wer Jan 02 '20 at 08:18
6

@Erhan i have done the same. but again it is throwing error : TypeError: Cannot read property 'history' of undefined. any suggestion ? – Mukund Kumar Apr 02 '20 at 06:14
1

This won't work in TypeScript, as it will give the following error: `TS2698: Spread types may only be created from object types.` – wentjun Jul 07 '20 at 11:51
1

For TypeScript support, see [this answer](https://stackoverflow.com/a/62775608). – Jonathan Reyes Aug 25 '20 at 21:22

targumon · Answer 3 · 2020-11-03T14:58:43.253

31

Wearing my politician hat I'll dare to state that you're asking the wrong question.

It's not useHistory that you want to mock. Instead you'd just want to feed it with history object which you control.

This also allows you to check for push invocations, just like the 2 top answers (as of writing this).

If that's indeed the case, createMemoryHistory got your back:

import {Router} from 'react-router-dom'
import {createMemoryHistory} from 'history'

test('QuestionContainer should handle navigation', () => {
  const history = createMemoryHistory()
  const pushSpy = jest.spyOn(history, 'push') // or 'replace', 'goBack', etc.
  render(
      <Router history={history}>
        <QuestionContainer/>
      </Router>
  )
  userEvent.click(screen.getByRole('button')) // or whatever action relevant to your UI
  expect(pushSpy).toHaveBeenCalled()
})

edited Nov 03 '20 at 14:58

answered Nov 03 '20 at 14:52

targumon

1,041
12
26

I tried this one, my onClick is working ( checked by console logging) but history.push is not being fired , can you help to debug it – Ranjan Kumar Oct 03 '21 at 07:30
@RanjanKumar hard to debug without seeing code... but I'll try anyway: are you spying on 'push' like in my example and yet the toHaveBeenCalled expectation fails? – targumon Oct 04 '21 at 20:18
1

I think you're right to wear that hat. I didn't really want to mock history. I wanted the error I got when calling `useHistory` to go away! Rendering inside `` did the trick nicely for me! – Ian Grainger Mar 31 '22 at 16:48

score 29 · Answer 4 · answered Dec 24 '19 at 06:03

Here's a more verbose example, taken from working test code (since I had difficulty implementing the code above):

Component.js

  import { useHistory } from 'react-router-dom';
  ...

  const Component = () => {
      ...
      const history = useHistory();
      ...
      return (
          <>
              <a className="selector" onClick={() => history.push('/whatever')}>Click me</a>
              ...
          </>
      )
  });

Component.test.js

  import { Router } from 'react-router-dom';
  import { act } from '@testing-library/react-hooks';
  import { mount } from 'enzyme';
  import Component from './Component';
  it('...', () => {
    const historyMock = { push: jest.fn(), location: {}, listen: jest.fn() };
    ...
    const wrapper = mount(
      <Router history={historyMock}>
        <Component isLoading={false} />
      </Router>,
    ).find('.selector').at(1);

    const { onClick } = wrapper.props();
    act(() => {
      onClick();
    });

    expect(historyMock.push.mock.calls[0][0]).toEqual('/whatever');
  });

it worked for me. I had to use this trick with typescript though: — JulienCoo, Jan 20 '23 at 15:17

score 20 · Answer 5 · edited Jun 08 '22 at 14:04

20

In the Github react-router repo I found that the useHistory hook uses a singleton context, and that you can use a MemoryRouter to provide that context in tests.

import { MemoryRouter } from 'react-router-dom';
const tree =  mount(
    <MemoryRouter>
        // Add the element using history here.
    </MemoryRouter>
);

edited Jun 08 '22 at 14:04

Paul

420
1
5
18

answered Oct 15 '19 at 11:28

Ivan Martinyuk

1,230
1
9
13

Please let us know how we will get *...props* value ?? – Amit Kumar Jan 12 '21 at 04:13

score 7 · Answer 6 · answered Apr 27 '21 at 15:24

A way to mock the push function of useHistory:

import reactRouterDom from 'react-router-dom';
jest.mock('react-router-dom');

const pushMock = jest.fn();
reactRouterDom.useHistory = jest.fn().mockReturnValue({push: pushMock});

Then, how to check if the function have been called:

expect(pushMock).toHaveBeenCalledTimes(1);
expect(pushMock).toHaveBeenCalledWith('something');

score 3 · Answer 7 · answered Dec 13 '21 at 14:26

This works for me, I was having problems with useLocation too

jest.mock('react-router-dom', () => ({
  useHistory: () => ({
    push: jest.fn()
  }),
  useLocation: jest.fn().mockReturnValue({
    pathname: '/another-route',
    search: '',
    hash: '',
    state: null,
    key: '5nvxpbdafa'
})}))

score 2 · Answer 8 · answered Mar 11 '21 at 11:29

2

I found the above answers very helpful. However I missed the ability to spy and actually test functionality. But simply naming the mock function first solved that for me.

const mockPush = jest.fn();
jest.mock('react-router-dom', () => ({
  useHistory: () => {
    const push = () => mockPush ();
    return { push };
  },
}));

answered Mar 11 '21 at 11:29

rogerdean

21
3

Why so cumbersome? This should be written like this: `useHistory: () => ({ push: mockPush })` – targumon Jan 14 '22 at 21:10

How to mock useHistory hook in jest?

8 Answers8

Linked