How to mock useHistory hook in jest?

In Jest unit testing, when a component under test uses the useHistory hook from react-router-dom, we typically need to mock it to control and test routing-related logic. Below are the steps and examples for mocking useHistory:

Step 1: Setting up the Jest Test File

First, import the necessary modules and prepare your component in your Jest test file.

javascript
import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import { Router } from 'react-router-dom';
import { createMemoryHistory } from 'history';
import MyComponent from './MyComponent';  // Assume this is the component you're testing

Step 2: Mocking useHistory

Next, we use mock to simulate useHistory. There are two common approaches:

Method 1: Directly overriding useHistory in the test

You can directly override useHistory in your test file.

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

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

Then, in your specific test case, define how useHistory should behave:

javascript
test('should navigate to home page on button click', () => {
  const historyMock = { push: jest.fn(), location: {}, listen: jest.fn() };
  useHistory.mockReturnValue(historyMock);

  const { getByText } = render(<MyComponent />);
  fireEvent.click(getByText('Go Home'));

  expect(historyMock.push).toHaveBeenCalledWith('/home');
});

Method 2: Using Router and createMemoryHistory

Another approach is to wrap your component with Router and createMemoryHistory to flexibly control routing state.

javascript
test('should navigate on button click', () => {
  const history = createMemoryHistory();
  const { getByText } = render(
    <Router history={history}>
      <MyComponent />
    </Router>
  );

  fireEvent.click(getByText('Go Home'));
  expect(history.location.pathname).toBe('/home');
});

Step 3: Execution and Verification

Regardless of the method chosen, execute your test command to run the tests and verify expected behavior. Use npm test or your configured command to run Jest.

Summary

Mocking useHistory can be achieved by directly mocking useHistory or using Router and createMemoryHistory. The choice depends on personal or team preferences for testing strategies. If your component heavily relies on routing behavior, using Router and createMemoryHistory may be more appropriate.

In Jest unit tests, when you need to mock the useHistory hook from React Router, you can use jest.mock to create a mock implementation. Since useHistory is a hook, we typically mock the entire react-router-dom module and provide a custom implementation for useHistory. Here are the specific steps:

1. Use jest.mock At the top of your test file, use jest.mock to mock the react-router-dom module.

2. Provide mock implementation Provide an alternative implementation for useHistory within the mock.

3. Write the test Use the mocked useHistory in your unit test.

Here is a code example:

jsx
// Import necessary dependencies
import { render, screen } from '@testing-library/react';
import React from 'react';
import { Router } from 'react-router-dom';
import { createMemoryHistory } from 'history';
import MyComponent from './MyComponent'; // Assume this is the component you want to test

// Use jest.mock to mock the react-router-dom module
jest.mock('react-router-dom', () => {
  // Get the original module to use unmocked parts
  const originalModule = jest.requireActual('react-router-dom');
  // Create a mock history object
  const history = createMemoryHistory();
  // Return your mock
  return {
    ...originalModule,
    useHistory: () => ({
      push: history.push,
      location: history.location,
      listen: history.listen
    }),
  };
});

// Write your test
const history = createMemoryHistory();
render(
  <Router history={history}>
    <MyComponent />
  </Router>
);

// Verify interaction with the mocked useHistory
screen.getByText('Some button text').click();
expect(history.location.pathname).toBe('/expected-path');

In this example, we use createMemoryHistory to create a memory history object, which is a common technique in testing as it allows us to simulate navigation and verify expected path changes. By mocking useHistory, we can control and verify how the component interacts with the React Router history object.