কীভাবে উপহাসে ব্যবহারের ইতিহাসের হুককে উপহাস করবেন?

Question

আমি টাইপস্ক্রিপ্টের সাথে রিয়েট রাউটার v5.1.2 এ ইউজ হিস্টরি হুক ব্যবহার করছি? ইউনিট পরীক্ষা চলাকালীন, আমি ইস্যু পেয়েছি।

প্রকারের ত্রুটি: অপরিজ্ঞাপিতের সম্পত্তি 'ইতিহাস' পড়তে পারে না।

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

@ ইরান আমিও তাই করেছি। তবে আবার এটি ত্রুটি ছুঁড়ে ফেলছে: টাইপ এরির: অপরিজ্ঞাতকৃত সম্পত্তি 'ইতিহাস' পড়তে পারে না। যেকোনো পরামর্শ ?

— মুকুন্দ কুমার

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

গিথুব রিঅ্যাক্ট-রাউটার রেপোতে আমি দেখতে পেলাম যে UseHistory hook সিঙ্গেলটন প্রসঙ্গ ব্যবহার করে, যখন আমি মাউন্ট মেমোরিরউটারে ব্যবহার শুরু করি তখন এটি প্রসঙ্গটি খুঁজে পেয়ে কাজ শুরু করে। সুতরাং এটি ঠিক করুন

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