Vitest：前端单元测试入门

这一课你将能做到

1. 在 Vite/React 项目中安装和配置 Vitest
2. 编写测试用例，用断言验证函数和组件的行为
3. 测试异步代码和 React 组件，生成覆盖率报告

为什么要学

手动测试的问题是：改一行代码，要点开十几个页面验证。代码量大了以后，没人记得所有边界情况，也不敢重构——怕改坏不知道。单元测试就是自动化脚本，每次改完代码跑一遍，几秒内告诉你有没有破坏已有功能。

Vitest 是 Vite 生态的测试框架，由 Vite 团队开发，速度极快，API 和 Jest 完全兼容。现代前端项目标配：Vite + Vitest + React Testing Library。

先建立图像

测试的基本结构：

describe（测试套件，一组相关测试）
└── it / test（单个测试用例）
    ├── 准备数据（Arrange）
    ├── 执行操作（Act）
    └── 断言结果（Assert）

一个测试文件通常包含多个 describe 块，每个 describe 包含多个 it 用例。

跟着做

步骤 1：安装 Vitest

在 Vite + React 项目中：

npm install -D vitest @testing-library/react @testing-library/jest-dom jsdom

修改 package.json 添加脚本：

{
  "scripts": {
    "test": "vitest",
    "test:run": "vitest run",
    "coverage": "vitest run --coverage"
  }
}

创建 vitest.config.js（或修改 vite.config.js）：

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

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

创建 src/test/setup.js：

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

步骤 2：第一个测试

创建 src/utils/math.js：

export function add(a, b) {
    return a + b;
}

export function divide(a, b) {
    if (b === 0) throw new Error("除数不能为 0");
    return a / b;
}

创建 src/utils/math.test.js：

import { describe, it, expect } from "vitest";
import { add, divide } from "./math";

describe("math 工具函数", () => {
    it("add 应该正确相加", () => {
        expect(add(1, 2)).toBe(3);
        expect(add(-1, 1)).toBe(0);
    });

    it("divide 应该正确相除", () => {
        expect(divide(10, 2)).toBe(5);
    });

    it("divide 除数为 0 时应该抛出错误", () => {
        expect(() => divide(10, 0)).toThrow("除数不能为 0");
    });
});