Dive into the world of modern web testing with this comprehensive guide on integrating Jest into your Next.js project and learn how to set up a robust testing environment for your App Router-based application using TypeScript.
We’ll walk you through installing essential dependencies, configuring Jest for Next.js, and writing your first test.

Perfect for developers looking to enhance their Next.js applications with reliable, type-safe testing practices. Increase the quality and confidence of your code with Jest and React Testing Library in your Next.js TypeScript projects.

To get started with Jest in a Next.js project, you need to follow these steps:

1. Install dependencies:

npm install --save-dev jest @types/jest @testing-library/react @testing-library/jest-dom jest-environment-jsdom

Let’s take a closer look at this npm install command and explain each package:

• --save-dev: This flag will store these packages as development dependencies in your package.json. This means that these packages are only needed for development and testing, not for production.

• jest: This is the core library of Jest, a popular JavaScript testing framework developed by Facebook. It provides the test runner and assertion library.

• @types/jest: This package provides TypeScript type definitions for Jest. It enables better autocomplete and type checking when writing tests in TypeScript.

• @testing-library/react:This is a set of tools that allow you to test React components without having to depend on their implementation details. It encourages better testing practices.

• @testing-library/jest-dom:This package extends Jest with custom matchers for attaching to DOM nodes, making it easier to test the state of the DOM in your tests.

• jest-environment-jsdom: This package provides a simulated DOM environment for Jest tests. It is necessary when testing React components that interact with the DOM, as Next.js components often do.

2. Create a Jest configuration file (jest.config.js) in the root of your project:

const nextJest = require('next/jest')

const createJestConfig = nextJest({
  dir: './',
})

const customJestConfig = {
  setupFilesAfterEnv: ('/jest.setup.js'),
  testEnvironment: 'jest-environment-jsdom',
}

module.exports = createJestConfig(customJestConfig)

This code configures Jest to work with Next.js. Let’s break it down line by line:

• const nextJest = require('next/jest'): This imports the Next.js Jest configuration function. Next.js provides this to set up Jest in a way that is compatible with Next.js projects.

• const createJestConfig = nextJest({ dir: './', }): This will create a Jest configuration function specific to your Next.js project, and dir: './' The option tells Next.js that the root directory of your project is the current directory.

• const customJestConfig = { ... }: This object contains custom Jest configuration options.

• setupFilesAfterEnv: ('/jest.setup.js'): This specifies files to execute after the Jest environment is set up but before any tests are run, and it refers to jest.setup.js file in your main folder, where you can add generic installation code for your tests.

• testEnvironment: 'jest-environment-jsdom':This sets the test environment to jsdom, which simulates a DOM environment in Node.js. This is needed for testing React components that interact with the DOM.

• module.exports = createJestConfig(customJestConfig): This exports the final Jest configuration, it calls createJestConfig with your custom configuration, which merges your settings with the default Jest settings from Next.js.

3. Create a jest.setup.js file in the root of your project:

import '@testing-library/jest-dom'

4. Update your package.json to include Jest scripts:

"scripts": {
  "test": "jest",
  "test:watch": "jest --watch"
}

These scripts provide two different ways to run your tests:

• The test script is intended to run all tests once, which is ideal for CI/CD or before committing changes.

• The test:watch script is intended for development, so you can see the test results updating in real time as you code.

5. Make a __tests__ folder in the root of your project or next to your components

6. Write your first test (e.g. Home.test.tsx):

import '@testing-library/jest-dom'
import { render, screen } from '@testing-library/react'
import Home from '../app/page'

describe('Home', () => {
    it('renders a heading', () => {
        render(Home />)
        const heading = screen.getAllByRole('heading', { level: 2 })
        expect(heading).toHaveLength(4);
    })
})

7. Run your tests:

npm test

This configuration will get you started using Jest in a Next.js project.

Incorporating Jest into your Next.js project with TypeScript marks an important step toward robust, maintainable code. By following this guide, you’ll have laid the foundation for a comprehensive testing strategy that will serve you well as your application grows.

By prioritizing testing in your development workflow, you not only discover bugs early, but you also document the behavior of your code, making it easier for your team to collaborate and refactor with confidence.

Have fun testing 😀😀