Testing Next.js Router with Jest and React Testing Library

At itselftools.com, we've gained substantial experience by developing over 30 web applications using Next.js and Firebase. One common challenge has been testing applications that utilize Next.js's routing abilities. This article covers an essential aspect of testing in Next.js: mocking the router to test components that depend on routing.

Why Mock the Router?

Next.js uses a file-system-based router built on the concept of pages. When we write unit tests for components that depend on the router, we need to mock these routing dependencies to test components in isolation. This ensures our tests are not reliant on the entire routing architecture and are both faster and more predictable.

The Code Snippet Explained

Here's a basic example of how to mock useRouter from Next.js's router to test a component that relies on the pathname:

import { render, screen } from '@testing-library/react';
import { useRouter } from 'next/router';

jest.mock('next/router');

test('should display current path using router', () => {
  useRouter.mockReturnValue({
    pathname: '/about'
  });
  render(<YourComponent />);
  expect(screen.getByText('Current path: /about')).toBeInTheDocument();
});

In this test:

1. Mocking useRouter: We start by mocking the useRouter hook using jest.mock. This allows us to define what the useRouter hook returns without needing an actual router.
2. Setting the Expected Route: The useRouter mock is configured to return an object with a pathname property set to /about. This simulates navigating to the /about path.
3. Rendering the Component: YourComponent is then rendered. This component should make use of useRouter somehow to display the current path.
4. Testing the Output: Finally, we use screen.getByText to verify that the expected text, which includes the mocked path, is present in the document.

Conclusion

Unit testing components that rely on external dependencies like the router is critical for building robust Next.js applications. By mocking these dependencies, we ensure our components behave as expected under controlled conditions without the overhead of a full environment setup. If you'd like to see this code in action, visit some of our developed applications such as Online Archive Extractor, Free Voice Recorder App, and Easy TTS Reader. These platforms highlight the practical applications of such testing strategies in real-world scenarios.

By integrating such testing techniques, you enhance the reliability and efficiency of your Next.js projects, ensuring they perform seamlessly across different environments.