Nextjs Testing Jest and React Testing Library Creating your tests:

Optionally, add a snapshot test to keep track of any unexpected changes to your component:

// __tests__/snapshot.js

import { render } from '@testing-library/react'
import Home from '../pages/index'

it('renders homepage unchanged', () => {
  const { container } = render(<Home />)
  expect(container).toMatchSnapshot()
})

Add the Jest executable in watch mode to the package.json scripts:

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "test": "jest --watch"
}

Nextjs Testing Jest and React Testing Library Creating your tests:

For example, we can add a test to check if the component successfully renders a heading:

// __tests__/index.test.jsx

import { render, screen } from '@testing-library/react'
import Home from '../pages/index'

describe('Home', () => {
  it('renders a heading', () => {
    render(<Home />)

    const heading = screen.getByRole('heading', {
      name: /welcome to next\.js!/i,
    })

    expect(heading).toBeInTheDocument()
  })
})

Nextjs Testing Jest and React Testing Library Setting up Jest (with the Rust Compiler)

Create a jest.config.js file in your project's root directory and add the following:

// jest.config.js
const nextJest = require('next/jest')

const createJestConfig = nextJest({
  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
  dir: './',
})

// Add any custom config to be passed to Jest
const customJestConfig = {
  // Add more setup options before each test is run
  // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
  moduleDirectories: ['node_modules', '<rootDir>/'],
  testEnvironment: 'jest-environment-jsdom',
}

// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
module.exports = createJestConfig(customJestConfig)

Recommend

Nextjs Testing Jest and React Testing Library Creating your tests:

Nextjs Testing Jest and React Testing Library Setting up Jest (with Babel)

Nextjs Testing Jest and React Testing Library Setting up Jest (with the Rust Compiler)

Nextjs Testing Jest and React Testing Library Quickstart

Nextjs Testing Playwright Creating your first Playwright end-to-end test

Nextjs Testing Playwright Manual setup

Nextjs Testing Playwright Quickstart

Nextjs Testing Cypress Getting ready for Continuous Integration (CI)

Nextjs Testing Cypress Creating your first Cypress integration test

Nextjs Testing Cypress Manual setup

Nextjs Testing Cypress Quickstart