Jest setup for Next.js - Mini Project: Build & Apply

Jest setup for Next.js

📖 Scenario: You are building a Next.js app and want to test your components and functions to make sure they work correctly.Testing helps catch bugs early and keeps your app reliable.

🎯 Goal: Set up Jest testing framework in a Next.js project with a simple test example.

📋 What You'll Learn

Create a Jest configuration file named jest.config.js with Next.js preset

Add a test script in package.json to run Jest

Create a simple test file sum.test.js with a test for a sum function

Run Jest tests successfully in the Next.js project

💡 Why This Matters

🌍 Real World

Testing is essential in real projects to catch bugs early and keep apps reliable.

💼 Career

Many companies use Jest with Next.js to ensure their web apps work correctly before release.

1

Create Jest configuration file

Create a file named jest.config.js in the project root. Inside it, write module.exports = { preset: 'next/jest' } exactly as shown.

NextJS

// Your code here

Need a hint?

This file tells Jest to use Next.js settings for testing.

2

Add test script to package.json

Open package.json and add a test script inside the scripts section with the value jest. The line should be exactly "test": "jest".

NextJS

{
  "scripts": {
    // Add the test script here
  }
}

Need a hint?

This script lets you run tests by typing npm test or yarn test.

3

Create a simple test file

Create a file named sum.test.js in the project root. Inside it, write a function sum that returns the sum of two numbers. Then write a Jest test using test and expect to check that sum(1, 2) equals 3.

NextJS

// Your code here

Need a hint?

This test checks if the sum function works correctly.

4

Run Jest tests

Run the Jest tests by executing npm test or yarn test in the terminal. Ensure the test passes without errors.

NextJS

// Run tests in terminal with npm test or yarn test

Need a hint?

Use your terminal to run the tests and see the results.