Làm thế nào để chế nhạo hook sử dụngHistory trong jest?

Tôi đang sử dụng hook UseHistory trong bộ định tuyến phản ứng v5.1.2 với bản đánh máy? Khi chạy thử nghiệm đơn vị, tôi đã có vấn đề.

TypeError: Không thể đọc thuộc tính 'lịch sử' không xác định.

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();
    });
});

Ngoài ra tôi đã thử sử dụng jest.mock('react-router', () =>({ useHistory: jest.fn() }));nhưng nó vẫn không hoạt động.

Tôi cần điều tương tự khi cho phép một thành phần chức năng phản ứng sử dụng useHistory.

Được giải quyết với giả lập sau trong tệp thử nghiệm của tôi:

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

Cái này làm việc cho tôi:

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

Đây là một ví dụ dài dòng hơn, được lấy từ mã kiểm tra hoạt động (vì tôi gặp khó khăn khi triển khai mã ở trên):

Thành phần

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

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

Thành phần.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');
  });

Trong repo bộ định tuyến phản ứng github tôi thấy rằng hook useHistory sử dụng bối cảnh đơn lẻ, khi tôi bắt đầu sử dụng trong mount MemoryRouter, nó tìm thấy bối cảnh và bắt đầu hoạt động. Vì vậy, sửa chữa nó

import { MemoryRouter } from 'react-router-dom';
const tree =  mount(<MemoryRouter><QuestionContainer {...props} /> </MemoryRouter>);