用Jest嘲弄NextJS路由器事件

Question

我试图用Jest模拟NextJS路由器事件。在这里找到了相关的资源NextJS路由器&笑话。这里的实现与我的非常相似。

但是，上面提到的解决方案对我不起作用。

我的测试如下:

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`
};
},
}));

Answer 3

首先模拟useRouter。

jest.mock('next/router', () => ({
userRouter: jest.fn()
})

然后，向mock添加一个返回值。我们需要事件。On和events。所以我们会返回那个

test('some test', () => {
useRouter.mockReturnValue({
events: {
on: () => {},
off: () => {},
}
})
render(<SomeComponent />)
expect(useRouter).toHaveBeenCalled()
})

。在on方法:on: jest.fn()中添加mock函数是没有用的，因为您无法访问它们。虚函数() => {}就可以了。如果你想测试事件。使用正确的值调用，这样做:

jest.mock('next/router', () => ({
useRouter: jest.fn()
}))
const mockOn = jest.fn()
test('some test', () => {
useRouter.mockReturnValue({
events: {
on: mockOn,
off: () => {},
}
})
render(<SomeComponent />)
expect(useRouter).toHaveBeenCalled()
expect(mockOn).toHaveBeenCalled()
expect(mockOn).toHaveBeenCalledWith('some event', expect.any(Function))
})

我在dev.to的一篇文章中写了更多关于mock next/router的内容。