Jest setup for Next.js

Introduction

Jest helps you check if your Next.js app works right by running tests automatically. It finds mistakes early so your app stays reliable.

You want to test if your React components in Next.js show the right content.

You need to check if your functions return expected results without running the whole app.

You want to catch bugs before users see them by running tests after changes.

You want to make sure your API routes in Next.js behave correctly.

You want to run tests automatically when you save code or before sharing it.

Syntax

NextJS

npm install --save-dev jest @testing-library/react @testing-library/jest-dom babel-jest identity-obj-proxy

// jest.config.js
module.exports = {
  testEnvironment: 'jsdom',
  moduleNameMapper: {
    '^.+\\.(css|less|scss|sass)$': 'identity-obj-proxy'
  },
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  testPathIgnorePatterns: ['/node_modules/', '/.next/'],
  transform: {
    '^.+\\.jsx?$': 'babel-jest'
  }
};

// jest.setup.js
import '@testing-library/jest-dom/extend-expect';

Use jest.config.js to tell Jest how to run tests in Next.js.

identity-obj-proxy helps Jest handle CSS imports without errors.

Examples

Install Jest and testing libraries for React and Next.js.

NextJS

npm install --save-dev jest @testing-library/react @testing-library/jest-dom babel-jest identity-obj-proxy

Basic Jest config to run tests with React and handle CSS modules.

NextJS

// jest.config.js
module.exports = {
  testEnvironment: 'jsdom',
  moduleNameMapper: {
    '^.+\\.(css|less|scss|sass)$': 'identity-obj-proxy'
  },
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  testPathIgnorePatterns: ['/node_modules/', '/.next/'],
  transform: {
    '^.+\\.jsx?$': 'babel-jest'
  }
};

Setup file to add extra matchers for testing React components.

NextJS

// jest.setup.js
import '@testing-library/jest-dom/extend-expect';

Sample Program

This test checks if the Greeting component shows the correct message with the given name.

NextJS

// components/Greeting.js
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('shows greeting message', () => {
  render(<Greeting name="Alice" />);
  expect(screen.getByText('Hello, Alice!')).toBeInTheDocument();
});

Important Notes

Run tests with npx jest or add a script in package.json like "test": "jest".

Use jsdom environment to simulate browser for React component tests.

Ignore Next.js build folders to speed up tests and avoid errors.

Summary

Jest helps test Next.js apps to catch bugs early.

Install Jest and React testing libraries, then configure Jest with jest.config.js.

Write simple tests to check if components show expected content.