Comment simuler le hook useHistory en jest ?

Question

J'utilise le hook UseHistory dans react router v5.1.2 avec typescript ? Lors de l'exécution du test unitaire, j'ai eu un problème.

Erreur de type : Impossible de lire la propriété 'history' d'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();
    });
});

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

Answer 1

J'ai eu besoin de la même chose lors de la création d'un composant fonctionnel react qui utilise useHistory .

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

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

Answer 2

Celui-là a marché pour moi :

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

Answer 3

Avec ma casquette de politicien, j'ose affirmer que vous posez la mauvaise question.

Ce n'est pas useHistory dont vous voulez vous moquer. Au lieu de cela, vous voulez juste l'alimenter avec un objet historique que vous contrôlez.

Cela vous permet également de vérifier push comme les deux meilleures réponses (au moment où j'écris ces lignes).

Si c'est effectivement le cas, createMemoryHistory Je vous couvre :

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

Answer 4

Voici un exemple plus verbeux, tiré d'un code de test fonctionnel (puisque j'ai eu des difficultés à mettre en œuvre le code ci-dessus) :

Composant.js

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

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

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

Answer 5

Dans le repo react-router de github j'ai trouvé que le hook useHistory utilise un contexte singleton, quand j'ai commencé à l'utiliser dans le mount MemoryRouter il a trouvé le contexte et a commencé à fonctionner. Donc je le corrige

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