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

18

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

Ошибка типа: невозможно прочитать свойство '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() }));но он все еще не работает.

Иван Мартинюк
источник

Ответы:

27

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

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

jest.mock('react-router-dom', () => ({
  useHistory: () => ({
    push: jest.fn(),
  }),
}));
Proustibat
источник
18

Этот работал для меня:

jest.mock('react-router-dom', () => ({
  ...jest.requireActual('react-router-dom'),
  useHistory: () => ({
    push: jest.fn()
  })
}));
Erhan
источник
1
этот подход сохраняет другие функции реакции-маршрутизатора-дом, над которыми вы, возможно, не захотите издеваться
Пнар Сби Вер
@ Erhan, я сделал то же самое. но опять-таки выдает ошибку: TypeError: Невозможно прочитать свойство 'history' undefined. любое предложение ?
Мукунд Кумар
7

Вот более подробный пример, взятый из рабочего тестового кода (поскольку у меня были трудности с реализацией кода выше):

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');
  });
Алекс W
источник
5

В репозитории GitHact-router я обнаружил, что ловушка useHistory использует одноэлементный контекст, когда я начал использовать в монтировании MemoryRouter, он нашел контекст и начал работать. Так что исправь

import { MemoryRouter } from 'react-router-dom';
const tree =  mount(<MemoryRouter><QuestionContainer {...props} /> </MemoryRouter>);
Иван Мартинюк
источник