设置下一个。-DEV365 开发者社区

在本教程中，我们将演示如何设置下一个。

先决条件

开始之前，请确保您在计算机上安装了以下内容：

node.js
npm

步骤1：创建next.js应用程序

首先，让我们使用create-next-app命令创建一个新的next.js应用程序。打开终端并运行以下命令：

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

此命令将在my-app目录中创建一个新的next.js应用程序。提示时，请选择TypeScript，而不是实验应用程序/目录。接下来，导航到项目目录：

cd my-app

设置vitest

现在，我们需要安装vitest作为我们的下一个应用程序的DEV依赖性。运行以下命令：

npm install --save-dev vitest

安装完成后，打开项目中的package.json文件，并在“脚本”部分中添加一个名为“ test”的新脚本：

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

我们现在已经配置了测试脚本为我们的应用程序运行vitest。

接下来，在项目的根目录中创建一个称为vitest.config.js的配置文件，然后将以下代码粘贴到其中：

import { defineConfig } from "vitest/config";

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

步骤3：测试设置

要测试是否正确设置了所有内容，请在项目的根目录中创建一个名为index.test.js的新文件，然后将以下代码粘贴到其中：

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);
  });
});

运行测试，打开终端并运行以下命令：

npm run test

您应该看到终端中显示的测试结果：

✓ 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)