69

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.

8 Answers 8

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(),
  }),
}));
8
  • 1
    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, 2020 at 5:41
  • 14
    Is there a way to capture useHistory().push() invocations?
    – taystack
    Aug 24, 2020 at 16:57
  • 8
    But how do you spyOn useHistory function?
    – omeralper
    Oct 28, 2020 at 14:10
  • Those who are using TypeScript may refer to this: stackoverflow.com/q/62774929/10959940 :)
    – wentjun
    Jan 6, 2021 at 2:27
  • 1
    @proustibat, can you provide a bit elaborated example ? Also, update the example with .test.js file
    – Amit Kumar
    Jan 12, 2021 at 4:09
54

This one worked for me:

jest.mock('react-router-dom', () => ({
  ...jest.requireActual('react-router-dom'),
  useHistory: () => ({
    push: jest.fn()
  })
}));
4
  • 1
    this approach preserves the other react-router-dom functions which you may not want to mock Jan 2, 2020 at 8:18
  • 6
    @Erhan i have done the same. but again it is throwing error : TypeError: Cannot read property 'history' of undefined. any suggestion ? Apr 2, 2020 at 6: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 7, 2020 at 11:51
  • 1
    For TypeScript support, see this answer. Aug 25, 2020 at 21:22
30

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()
})
3
  • 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 Oct 3, 2021 at 7: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 4, 2021 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 <Router history={createMemoryHistory()}> did the trick nicely for me! Mar 31, 2022 at 16:48
29

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');
  });
1
  • it worked for me. I had to use this trick with typescript though: <Router history={historyMock as unknown as RouterProps["history"]}>
    – JulienCoo
    Jan 20 at 15:17
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>
);
1
  • Please let us know how we will get ...props value ??
    – Amit Kumar
    Jan 12, 2021 at 4:13
7

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');
3

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'
})}))
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 };
  },
}));
1
  • Why so cumbersome? This should be written like this: useHistory: () => ({ push: mockPush })
    – targumon
    Jan 14, 2022 at 21:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.