使用 Jest 模拟 NextJS 路由器事件

Question

我正在尝试用 Jest 模拟 NextJS 路由器事件。在NextJS router & 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';
import { waitFor } from '@testing-library/react';
import { RequestStates } from 'types/State';
import useAdSetup from 'lib/hooks/useAdSetup';

const mockRequestState = RequestStates.Finished;

jest.mock('lib/Auth');
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}>
          <FavoritesPage />
        </Provider>
      );
    });
    component.find('.price-drop-nav-item').simulate('click');
  });

  it('shows price drops', () => {
    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);

    // Cleanup event listeners
    return (): void => {
      router.events.off('routeChangeComplete', handleComplete);
      router.events.off('routeChangeError', handleComplete);
    };
  }, [router]);

与引用的示例不同，当我运行代码时，我仍然收到以下错误：

TypeError: Cannot read property 'on' of undefined

我缺少什么？

Answer 1

我在网上找到了一堆相关样本。就 NextJS 11 而言，最有用的是vercel/next.js上的线程。基于此，我能够整理出以下工作解决方案：

jest.mock('next/router', () => ({
  useRouter() {
    return ({
      route: '/',
      pathname: '',
      query: '',
      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: '',
      query: '',
      asPath: '',
      push: jest.fn(),
      events: {
        on: jest.fn(),
        off: jest.fn()
      },
      beforePopState: jest.fn(() => null),
      prefetch: jest.fn(() => null)
    }));

    component = mount(
        <Provider store={store}>
          <FavoritesPage />
        </Provider>
    );
    component.find('.price-drop-nav-item').simulate('click');
  });

  it('shows price drops', () => {
  
    // expect(useRouter).toHaveBeenCalledTimes(1);
    expect(component.find('.price-drop-nav-item').hasClass('active')).toBeTruthy();
  });
});

其他一切对我来说都不起作用。的测试expect(useRouter).toHaveBeenCalledTimes(1)也不起作用。:)

Answer 2

我只是在调用之前将其放在测试文件的顶层describe。

jest.mock('next/router', () => ({
  useRouter() {
    return {
      pathname: '',
      // ... whatever else you you call on `router`
    };
  },
}));