nextjs-vitest

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Set up Vitest testing environment for a Next.js project.

为Next.js项目搭建Vitest测试环境。

Steps

步骤

1. Install required packages

1. 安装所需依赖包

Run the following command:

bash

npm install -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom vite-tsconfig-paths @testing-library/jest-dom @testing-library/user-event

运行以下命令：

bash

npm install -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom vite-tsconfig-paths @testing-library/jest-dom @testing-library/user-event

2. Create vitest.config.mts

2. 创建vitest.config.mts

Create

vitest.config.mts

in the project root:

typescript

import react from "@vitejs/plugin-react";
import tsconfigPaths from "vite-tsconfig-paths";
import { defineConfig } from "vitest/config";

export default defineConfig({
  plugins: [tsconfigPaths(), react()],
  test: {
    environment: "jsdom",
    globals: true,
    clearMocks: true,
    setupFiles: ["./vitest.setup.ts"],
  },
});

在项目根目录创建

vitest.config.mts

文件：

typescript

import react from "@vitejs/plugin-react";
import tsconfigPaths from "vite-tsconfig-paths";
import { defineConfig } from "vitest/config";

export default defineConfig({
  plugins: [tsconfigPaths(), react()],
  test: {
    environment: "jsdom",
    globals: true,
    clearMocks: true,
    setupFiles: ["./vitest.setup.ts"],
  },
});

3. Create vitest.setup.ts

3. 创建vitest.setup.ts

Create

vitest.setup.ts

in the project root:

typescript

import "@testing-library/jest-dom/vitest";

在项目根目录创建

vitest.setup.ts

文件：

typescript

import "@testing-library/jest-dom/vitest";

4. Verify completion

4. 验证完成

Confirm all files have been created correctly.

确认所有文件已正确创建。