Next.js – Testing

Next.js

Testing

Setting up and writing tests for Next.js applications using Jest, React Testing Library, and Playwright.

Jest Configuration: Next.js provides a built-in configuration tool for Jest to simplify the setup process.

📄jest.config.ts
TS

import type { Config } from 'jest'
import nextJest from 'next/jest.js'
 
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 config: Config = {
  coverageProvider: 'v8',
  testEnvironment: 'jsdom',
  // Add more setup options before each test is run
  // setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
}
 
// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
export default createJestConfig(config)

Component Testing: Testing a Next.js page component using React Testing Library to verify UI rendering.

📄__tests__/page.test.tsx
TSX

import '@testing-library/jest-dom'
import { render, screen } from '@testing-library/react'
import Page from '../app/page'
 
describe('Page', () => {
  it('renders a heading', () => {
    render(<Page />)
 
    const heading = screen.getByRole('heading', { level: 1 })
 
    expect(heading).toBeInTheDocument()
  })
})

End-to-End Testing: Using Playwright to write E2E tests for navigating between Next.js pages.

📄tests/example.spec.ts
TS

import { test, expect } from '@playwright/test'
 
test('should navigate to the about page', async ({ page }) => {
  // Start from the index page (the baseURL is set via the webServer in the playwright.config.ts)
  await page.goto('/')
  
  // Find an element with the text 'About' and click on it
  await page.click('text=About')
  
  // The new URL should be "/about" (baseURL is used there)
  await expect(page).toHaveURL('/about')
  
  // The new page should contain an h1 with "About Page"
  await expect(page.locator('h1')).toContainText('About Page')
})