How to Use Jest with Next.js for Testing Components

To use Jest with Next.js, install Jest and React Testing Library, then configure Jest with a jest.config.js file including Next.js presets. Write test files alongside your components using test or it blocks, and run tests with the jest command.

Syntax

Here is the basic setup syntax for using Jest with Next.js:

• jest.config.js: Configures Jest to work with Next.js and React.
• test or it blocks: Define individual test cases.
• render from React Testing Library: Renders components for testing.
• expect: Makes assertions about component behavior.

javascript

module.exports = {
  preset: 'next',
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/$1',
  },
};

Example

This example shows a simple Next.js component and a Jest test that checks if it renders text correctly.

javascript

// components/Greeting.js
import React from 'react';

export default function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

// __tests__/Greeting.test.js
import { render, screen } from '@testing-library/react';
import Greeting from '../components/Greeting';

test('renders greeting with name', () => {
  render(<Greeting name="Alice" />);
  const greetingElement = screen.getByText('Hello, Alice!');
  expect(greetingElement).toBeInTheDocument();
});

Output

PASS  __tests__/Greeting.test.js
  ✓ renders greeting with name (25 ms)

Common Pitfalls

Common mistakes when using Jest with Next.js include:

• Not configuring jest.config.js properly, causing tests to fail due to missing Babel or Next.js presets.
• Forgetting to install @testing-library/jest-dom and set it up for extended matchers like toBeInTheDocument().
• Writing tests without the jsdom environment, which is needed for DOM APIs.
• Not mocking Next.js specific features like next/router when testing components that use them.

javascript

// Wrong: Missing setup for jest-dom matchers
import { render, screen } from '@testing-library/react';
import Greeting from '../components/Greeting';

test('fails without jest-dom setup', () => {
  render(<Greeting name="Bob" />);
  // This will error because toBeInTheDocument is undefined
  expect(screen.getByText('Hello, Bob!')).toBeInTheDocument();
});

// Right: Add jest-dom setup in jest.setup.js
import '@testing-library/jest-dom/extend-expect';

Quick Reference

Summary tips for using Jest with Next.js:

• Install dependencies: jest, @testing-library/react, @testing-library/jest-dom, babel-jest.
• Configure jest.config.js with Next.js preset and jsdom environment.
• Create jest.setup.js to import @testing-library/jest-dom/extend-expect.
• Write tests in __tests__ folders or alongside components with .test.js suffix.
• Run tests with npx jest or add a script in package.json.

Key Takeaways

Configure Jest with Next.js preset and jsdom environment for proper testing.

Use React Testing Library with jest-dom for easy and readable component tests.

Always set up jest-dom in a setup file to enable extended matchers.

Mock Next.js features like routing when testing components that depend on them.

Place tests close to components and run them with the jest command.