Setting up Next.js 13 with Vitest

#test #nextjs #vitest #javascript

In this tutorial, we will demonstrate how to set up a Next.js 13 application with Vitest.

Prerequisites

Before getting started, make sure you have the following installed on your machine:

Node.js
npm

Step 1: Creating a Next.js application

First, let's create a new Next.js application using the create-next-app command. Open your terminal and run the following command:

npx create-next-app my-app --yes

This command will create a new Next.js application in the my-app directory. When prompted, choose No for TypeScript and No for the experimental app/ directory. Next, navigate to the project directory:

cd my-app

Setting up Vitest

Now, we need to install Vitest as a dev dependency for our Next.js application. Run the following command:

npm install --save-dev vitest

Once the installation is complete, open the package.json file in your project and add a new script called "test" under the "scripts" section:

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint",
  "test": "vitest"
}

We have now configured the test script to run Vitest for our application.

Next, create a configuration file called vitest.config.js in the root directory of your project and paste the following code into it:

import { defineConfig } from "vitest/config";

export default defineConfig({
  test: {},
});

Step 3: Test the setup

To test if everything is set up correctly, create a new file named index.test.js in the root directory of your project and paste the following code into it:

import { describe, expect, test } from "vitest";

const add = (a, b) => {
  return a + b;
};

describe("test add function", () => {
  test("should return the sum of two numbers", () => {
    const result = add(2, 3);
    expect(result).toBe(5);
  });

  test("should return zero when adding zero to a number", () => {
    const result = add(10, 0);
    expect(result).toBe(10);
  });

  test("should return a negative number when adding a negative and a positive number", () => {
    const result = add(-5, 8);
    expect(result).toBe(3);
  });
});

To run the tests, open your terminal and run the following command:

npm run test

You should see the test results displayed in your terminal:

✓ index.test.js (3)

 Test Files  1 passed (1)
      Tests  3 passed (3)
   Start at  10:43:04
   Duration  414ms (transform 29ms, setup 0ms, collect 18ms, tests 6ms, environment 0ms, prepare 91ms)