Как издеваться над использованием истории крючка в шутку?

Question

Я использую хук UseHistory в реакции маршрутизатора v5.1.2 с машинописью? При выполнении модульного теста у меня возникла проблема.

TypeError: Невозможно прочитать свойство 'history' 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();
    });
});

Также я попытался использовать jest.mock('react-router', () =>({ useHistory: jest.fn() }));но все равно не работает.

Answer 1

Мне нужно было то же самое, когда вы обрабатывали функциональный компонент реакции, который использует useHistory.

Решено с помощью следующего макета в моем тестовом файле:

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

Answer 2

В репозитории github реакции-маршрутизатор я обнаружил, что ловушка useHistory использует одноэлементный контекст, когда я начал использовать в монтировании MemoryRouter, он нашел контекст и начал работу. Так что исправь это import { MemoryRouter } from 'react-router-dom'; const tree = mount(<MemoryRouter><QuestionContainer {...props} /> </MemoryRouter>);