Testing Your Next.js Application: A Step-by-Step Guide

Prerequisites

To follow along with this guide, you’ll need:

• Working knowledge of React and Next.js
• Familiarity with testing applications
• Node.js installed on your machine
• A code editor (such as Visual Studio Code)

Setting Up Your Next.js Application

To get started, create a new Next.js application by running the following command in your terminal:

npx create-next-app jest-tutorial

Once the installation is complete, open the project in your code editor and start the development server with:

npm run dev

Building a Calculator Application

For the purpose of this tutorial, we’ll build a simple calculator application. We won’t go into the details of the calculator’s logic, but we’ll provide the code for the key components.

Create a new file called index.js in the pages directory and add the following code:

import React from 'eact';

const Home = () => {
  return (
    <div>
      <h1>Calculator</h1>
      <input type="number" id="num1" data-testid="num1" />
      <input type="number" id="num2" data-testid="num2" />
      <button data-testid="add">Add</button>
      <p data-testid="result">Result:</p>
    </div>
  );
};

export default Home;

Setting Up Jest

To set up Jest, install the required packages by running:

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

Create a new file called jest.config.js in the root of your project and add the following configuration:

module.exports = {
  preset: 'next',
  collectCoverage: true,
};

Writing Tests

Create a new file called index.test.js in the root of your project and add the following test:

import React from 'eact';
import { render, fireEvent } from '@testing-library/react';
import Home from './pages/index';

describe('Home page', () => {
  it('renders correctly', () => {
    const { getByTestId } = render(<Home />);
    expect(getByTestId('num1')).toBeInTheDocument();
    expect(getByTestId('num2')).toBeInTheDocument();
    expect(getByTestId('add')).toBeInTheDocument();
    expect(getByTestId('result')).toBeInTheDocument();
  });
});

Running Tests

Run your tests with the following command:

npm run test

Testing Calculator Operations

Add more tests to check if the calculator operations are working correctly:

it('adds numbers correctly', () => {
  const { getByTestId } = render(<Home />);
  fireEvent.change(getByTestId('num1'), { target: { value: '2' } });
  fireEvent.change(getByTestId('num2'), { target: { value: '3' } });
  fireEvent.click(getByTestId('add'));
  expect(getByTestId('result')).toHaveTextContent('5');
});

Simulating an Error

Simulate an error in your application by changing the add function to subtract instead of add:

const add = (a, b) => a - b;

Run your tests again and see how Jest reports the error.

Additional Tips

Some additional tips to keep in mind:

• Mocking external modules and APIs can help isolate your code and make your tests more reliable.
• Testing React Hooks requires rendering the component that uses the hook and testing its behavior.
• Integration testing allows you to test the core business logic and workflow of your application by testing pages and their interaction with API routes and external dependencies.