前端项目怎么配置自动化测试？Jest 和 Vitest 怎么选？

Question

仓乃文 · Accepted Answer

2025 年 Vitest 已经成为 Vite 项目的首选测试框架，和 Jest API 几乎 100% 兼容但速度快 3-10 倍。如果项目用 Vite，直接选 Vitest；如果项目用 Webpack 或有大量存量 Jest 测试，继续用 Jest。

Vitest 配置（推荐）：
```typescript
import { defineConfig } from "vitest/config";
import vue from "@vitejs/plugin-vue";
import { resolve } from "path";

export default defineConfig({
  plugins: [vue()],
  test: {
    globals: true,
    environment: "jsdom",
    coverage: {
      provider: "v8",
      reporter: ["text", "lcov"],
      include: ["src/**/*.{ts,vue}"],
      exclude: ["src/**/*.d.ts"],
    },
    setupFiles: ["./test/setup.ts"],
  },
  resolve: {
    alias: { "@": resolve(__dirname, "src") },
  },
});
```

测试示例：
```typescript
import { describe, it, expect } from "vitest";
import { formatDate } from "./format";

describe("formatDate", () => {
  it("格式化日期字符串", () => {
    expect(formatDate("2025-01-15")).toBe("2025年01月15日");
  });

it("处理空值", () => {
    expect(formatDate("")).toBe("");
  });
});
```

Jest vs Vitest 对比：
```
| 维度          | Jest              | Vitest            |
|--------------|-------------------|-------------------|
| 启动速度      | 慢（需要转换）      | 快（复用 Vite）    |
| HMR          | 不支持             | 支持              |
| 配置复杂度    | 高（需 babel/ts）  | 低（复用 vite配置）|
| ESM 支持     | 需要额外配置       | 原生支持           |
| API 兼容性   | -                  | 95%+ 兼容 Jest    |
```

补充说明：
- 从 Jest 迁移到 Vitest 基本只需改配置文件，测试代码几乎不用改
- Vue 组件测试推荐 @vue/test-utils，React 推荐 @testing-library/react
- E2E 测试推荐 Playwright，比 Cypress 更快更稳定
- CI 中运行测试加 --coverage 参数，配合 codecov 做覆盖率门禁