Comment se moquer du crochet UseHistory en plaisantant?

J'utilise le crochet UseHistory dans le routeur React v5.1.2 avec tapuscrit? Lors de l'exécution du test unitaire, j'ai un problème.

TypeError: Impossible de lire la propriété «historique» de non défini.

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

J'ai également essayé de l'utiliser, jest.mock('react-router', () =>({ useHistory: jest.fn() }));mais cela ne fonctionne toujours pas.

J'avais besoin de la même chose pour superposer un composant fonctionnel réactif qui utilise useHistory.

Résolu avec la maquette suivante dans mon fichier de test:

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

Celui-ci a fonctionné pour moi:

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

Voici un exemple plus détaillé, tiré du code de test fonctionnel (car j'ai eu du mal à implémenter le code ci-dessus):

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

Dans github react-router repo, j'ai trouvé que le crochet useHistory utilise le contexte singleton, lorsque j'ai commencé à l'utiliser dans le montage MemoryRouter, il a trouvé le contexte et a commencé à fonctionner. Alors corrige ça

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