Unit Testing in Next.js

Unit testing verifies individual components and functions in a Next.js application to ensure they work as expected. It helps detect bugs early, improves code quality, and makes applications easier to maintain.

• Test components, pages, and utility functions.
• Validate application behavior with automated tests.
• Detect bugs before deployment.
• Improve code quality and maintainability.

Testing Frameworks for Next.js

The following testing frameworks help verify the functionality, reliability, and quality of Next.js applications.

• Jest: A JavaScript testing framework used to write and run unit tests for Next.js applications.
• React Testing Library: A library for testing React components by simulating user interactions and verifying UI behavior.
• Cypress: An end-to-end testing framework used to test complete user workflows in a browser environment.

Steps to Set Up Unit Testing in Next.js

Step 1: Create a New Next.js Application

Create a Next.js project using the following commands:

npx create-next-app@latest next-testing-app
cd next-testing-app

Step 2: Install Jest and React Testing Library

Install the required packages for unit testing.

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

Step 3: Configure Jest

Create a jest.config.js file and add the following configuration:

module.exports = {
  testEnvironment: "jsdom",
  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
};

Create a jest.setup.js file and add:

import "@testing-library/jest-dom";

Add the following script to package.json:

"scripts": {
  "test": "jest"
}

Step 4: Write Test Cases

Create test files for your components, pages, or utility functions to verify their behavior.

const Button = ({ label, onClick }) => {
    return (
        <button onClick={onClick} className="my-button">
            {label}
        </button>
    );
};

export default Button;

import { render, screen, fireEvent } from "@testing-library/react";
import Button from "./Button";

test("Button renders correctly", () => {
    render(<Button label="Click me" />);

    expect(
        screen.getByText(/Click me/i)
    ).toBeInTheDocument();
});

test("Button onClick is called", () => {
    const mockClick = jest.fn();

    render(
        <Button
            label="Click me"
            onClick={mockClick}
        />
    );

    fireEvent.click(
        screen.getByText(/Click me/i)
    );

    expect(mockClick).toHaveBeenCalled();
});

Step 5: (Optional) Generate an HTML Test Report

Install the HTML reporter package:

npm install --save-dev jest-html-reporter

Update jest.config.js:

module.exports = {
  testEnvironment: "jsdom",
  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
  reporters: [
    "default",
    [
      "jest-html-reporter",
      {
        pageTitle: "Test Report",
      },
    ],
  ],
};

An HTML test report is generated, which can be opened in a browser to view the test execution results.

Step 6: Run the Tests

Run the following command to execute the test cases:

npm test

Also Check:

• Jest
• Cypress