用Jest嘲弄NextJS的路由器事件 -有解無憂

我正在嘗試用Jest來模擬NextJS路由器的事件。在NextJS 路由器& Jest這里找到了相關的資源。那里的實作與我的非常相似。

但是，那里提到的解決方案對我來說并不奏效。

我的測驗如下：

import { mount, ReactWrapper } from 'enzyme';
import FavoritesPage from 'pages/user/favorites'。
import configureStore, { MockStore } from 'redux-mock-store'。
import storeInitialState from '__tests__/unit/support/storeInitialState' ;
import { Provider } from 'react-redux'/span>;
import { waitFor } from '@testing-library/react'/span>。
import { RequestStates } from 'types/State'/span>;
import useAdSetup from 'lib/hooks/useAdSetup'/span>;
import { AgeType, PageType } from 'lib/CarGurusAds/TaxonomySchema'/span>。

const mockRequestState = RequestStates.Finished。

jest.mock('lib/Auth'/span>)。
jest.mock('lib/EventLogger') 。
jest.mock（'lib/hooks/useAdSetup'）。

jest.mock('lib/hooks/useFetchFavorites', （）=> {
  return（）: { requestState: RequestStates }。=> {
    return {
      requestState: mockRequestState,
    };
  };
});

jest.mock('next/router') 。

const mockStore = configureStore() 。

let store: MockStore。

describe('when clicking the price drop subnav button', ( ) => {
  let component: ReactWrapper。

  beforeEach(async ( ) => {
    store = mockStore（storeInitialState）。
    await waitFor(() =>  {
      component = mount(
        <Provider store={store}>/span>
          <FavoritesPage />/span>
        </Provider>/span>
      );
    });
    component.find('.price-drop-nav-item').simulate('click') 。
  });

  it('顯示價格下降', () => {
    let eventName;
    let routeChangeHandler;
    let useRouter = jest.fn（）。

    useRouter.mockImplementation(() => {
      return {
        events: {
          on: jest.fn((event, callback) => {
            eventName = event;
            routeChangeHandler = callback;
          }),
          off: jest.fn((event, callback) =>  {
            eventName = event;
            routeChangeHandler = callback;
          }),
        },
      };
    });
  
    expect（useRouter）.toHaveBeenCalledTimes（1）。
    expect(component.find('.price-drop-nav-item'). hasClass('active')).toBeTruthy() 。
  });
});

在內部，我的組件就像參考的例子一樣，有以下內容：

 useEffect(() =>  {
    const handleComplete: any = async （url: string） => {
      if (window) {
        await trackReturnToSeachClick（url）。
      }
    };
    router.events.on('routeChangeComplete', handleComplete) 。
    router.events.on('routeChangeError', handleComplete) 。

    //清理事件監聽器。
    return（）。void =>  {
      router.events.off('routeChangeComplete', handleComplete) 。
      router.events.off('routeChangeError', handleComplete) 。
    };
  }, [router])。

與參考的例子不同，當我運行我的代碼時，我仍然得到了以下錯誤：

與參考的例子不同，當我運行我的代碼時，我仍然得到了以下錯誤。

TypeError。不能讀取屬性'on' of undefined。

我錯過了什么？

uj5u.com熱心網友回復：

我在網上找到了一堆相關的樣本。就NextJS 11而言，最有用的是vercel/next.js的主題。在此基礎上，我整理出了以下的作業解決方案：

jest.mock('next/router', () => ({ useRouter（）{ return ({ route: '/', pathname: '', 查詢。'', asPath: '', push: jest.fn()。 events: { on: jest.fn(), off: jest.fn() }, beforePopState: jest.fn(() => null) 。 prefetch: jest.fn(() => null) }); }, })); const mockStore = configureStore()。 let store: MockStore。 describe('when clicking the price drop subnav button', ( ) => { let component: ReactWrapper。 beforeEach(async ( ) => { store = mockStore（storeInitialState）。 const useRouter = jest. spyOn(require("next/router"), "useRouter") 。 useRouter.mockImplementation(() =>（{ route: '/', pathname: '', 查詢。'', asPath: '', push: jest.fn()。 events: { on: jest.fn(), off: jest.fn() }, beforePopState: jest.fn(() => null) 。 prefetch: jest.fn(() => null) })); component = mount( <Provider store={store}> /span> <FavoritesPage />/span> </Provider>/span> ); component.find('.price-drop-nav-item').simulate('click') 。 }); it('顯示價格下降', () => { // expect(useRouter).toHaveBeenCalledTimes(1); { expect(component.find('.price-drop-nav-item')。 hasClass('active')).toBeTruthy() 。 }); });

其他的東西對我來說都不起作用。對expect(useRouter).toHaveBeenCalledTimes(1)的測驗也不起作用。 :)

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/310315.html

標籤：

上一篇：UnitTests的Makefile（通用檔案）。

下一篇：安卓11存盤訪問和Java檔案庫