I've been attempting to simulate NextJS router events using Jest. I came across a useful resource at NextJS router & Jest. The approach outlined there closely resembles mine.
Unfortunately, the solution provided in that post is not yielding the desired results for me.
Here's my test code:
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();
});
});
Inside my component, much like the example I referred to earlier, I have the following:
useEffect(() => {
const handleComplete: any = async (url: string) => {
if (window) {
await trackReturnToSeachClick(url);
}
};
router.events.on('routeChangeComplete', handleComplete);
router.events.on('routeChangeError', handleComplete);
// Cleaning up event listeners
return (): void => {
router.events.off('routeChangeComplete', handleComplete);
router.events.off('routeChangeError', handleComplete);
};
}, [router]);
However, unlike the referenced example, I am still encountering the error below when running my code:
TypeError: Cannot read property 'on' of undefined
Can anyone point out what might be missing?