Unit Testing in Next JS: Ensuring Code Quality in Your Project

Building applications with Next.js requires clean, reliable code—but ensuring that consistently can be tough. Unit testing acts like a health check, verifying that each component or function works in isolation.

Since Next.js supports both server-side and client-side rendering, testing is even more crucial. With the right setup using tools like Jest, React Testing Library, Enzyme, and Cypress, you can catch bugs early, simplify maintenance, and deploy with confidence.

• Write Component/Function: Start with your Next.js components, pages, or utilities.
• Choose Framework: Decide on Jest + RTL for unit testing, or Cypress for E2E.
• Setup Environment: Configure Jest or Cypress to run tests.
• Write Test Cases: Create test files to check behaviour and edge cases.
• Run Tests: Execute tests locally to validate your code.
• Generate Reports: Use tools like jest-html-reporter for detailed reports.
• CI/CD Integration: Automate tests to run on every code push.
• Final Output: A bug-free, high-quality, and scalable Next.js app.

Testing Frameworks for Next JS Applications

• Jest and React Testing Library:
  Jest is a popular JavaScript testing framework, and React Testing Library is a testing utility for React applications. Together, they provide a powerful combination for unit testing Next.js projects.
• Enzyme:
  Enzyme is another testing utility for React applications that provides a different approach to testing components. While React Testing Library focuses on testing how components behave from a user's perspective, Enzyme allows for more direct manipulation of component instances.
• Cypress:
  Cypress is an end-to-end testing framework that allows you to write tests that interact with your application as a user would. While not specifically for unit testing, Cypress can complement unit tests by providing comprehensive testing coverage.

Steps to Create Next Application (Install Required Modules)

Step 1: Initialize Project

Create a NextJS Application using the following command.

npx create-next-app@latest

Step 2: Install Testing Library

Install Jest, React Testing Library, Enzyme, or Cypress based on your chosen approach.

For Jest and React Testing Library:
npm install --save-dev jest @testing-library/react @testing-library/jest-dom --force

For Enzyme:
npm install --save-dev enzyme enzyme-adapter-react-16 --foce

For Cypress:
npm install --save-dev cypress --force

Step 3: Configuration setup

Set up Jest configuration (jest.config.js), React Testing Library configuration (setupTests.js), Enzyme adapter configuration, or Cypress configuration as required.

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

Step 4: Write tests

Create test files for your components, pages, or other units of code, and write tests to verify their behavior.

Step 5: Run tests

Use the appropriate command to run your tests. For Jest, use npm test. For Enzyme, configure Jest to run tests with Enzyme and then use npm test. For Cypress, use npx cypress open to open the Cypress test runner and run your tests interactively.

Step 6: To generate a Report

Ensure that you have installed the jest-html-reporter package as a development dependency in your project. You can install it using npm or yarn:

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

Step 7: Update Configuration

jest.config.js like this.

module.exports = { 
    // other Jest config options  
    reporters: [    'default',
        [
            'jest-html-reporter',
               {     
                    pageTitle: 'Test Report'  
                }
        ] ],
};

Project Structure:

The updated dependencies in package.json file will look like:

"dependencies": {
    "next": "14.1.0",
    "react": "^18",
    "react-dom": "^18"
},
"devDependencies": {
    "jest": "^27.0.6",
    "@testing-library/react": "^12.1.2",
    "@testing-library/jest-dom": "^5.14.1",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.6",
    "cypress": "^8.6.0"
}

Example: Let's consider a simple example of testing a React component in a NextJS project. Assume you have a Button component in components/Button.js:

// components/Button.js
import React from 'react';

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

export default Button;

// components/Button.test.js
import { render, screen, fireEvent } from '@testing-library/react';
import Button from './Button';

test('Button renders correctly', () => {
	render(<Button label="Click me" />);
	const buttonElement = screen.getByText(/Click me/i);
	expect(buttonElement).toBeInTheDocument();
});

test('Button onClick is called', () => {
	const mockClick = jest.fn();
	render(<Button label="Click me" onClick={mockClick} />);
	const buttonElement = screen.getByText(/Click me/i);
	fireEvent.click(buttonElement);
	expect(mockClick).toHaveBeenCalled();
});

Run your application test cases using the following command and run the test-report.html file i.e. live to server.

npm test

Output :