मज़ाक का उपयोग कैसे करें मजाक में हुक का उपयोग करें?

Question

मैं टाइप राइटर में v5.1.2 के राउटर में UseHistory हुक का उपयोग कर रहा हूं? जब यूनिट परीक्षण चल रहा है, तो मुझे मुद्दा मिल गया है।

TypeError: अपरिभाषित की संपत्ति 'इतिहास' नहीं पढ़ सकता है।

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

यह एक मेरे लिए काम किया:

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

Comments

यह दृष्टिकोण अन्य प्रतिक्रिया-राउटर-डोम फ़ंक्शंस को संरक्षित करता है जिसे आप मॉक नहीं करना चाहते हैं

— Pnar Sbi Wer

@ ईशान मैंने भी यही किया है। लेकिन फिर से यह त्रुटि फेंक रहा है: TypeError: अपरिभाषित की संपत्ति 'इतिहास' नहीं पढ़ सकता है। कोई उपाय ?

— मुकुंद कुमार

Answer 3

यहां एक और क्रिया उदाहरण दिया गया है, जो कार्य परीक्षण कोड से लिया गया है (क्योंकि मुझे ऊपर दिए गए कोड को लागू करने में कठिनाई थी):

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

Answer 4

गितुब प्रतिक्रिया-राउटर रेपो में मैंने पाया कि यूथहिस्ट्रॉन हुक सिंगलटन संदर्भ का उपयोग करता है, जब मैंने माउंट मेमोरी राउटर में इसका उपयोग शुरू किया तो इसे संदर्भ मिला और काम शुरू किया। तो इसे ठीक करें

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