Vitest 一个基于 Vite 的快速单元测试框架

一、Vitest 是什么？一句话概括

Vitest 是一个基于 Vite 的快速单元测试框架。

你可以把它理解为 "测试界的 Vite" ​ 。它继承了 Vite 的所有优点：极快的启动速度、热更新（HMR）等，并将其应用到了测试领域。

---

二、核心优势：为什么选择 Vitest？

为了让你更直观地理解，我们先看一张核心优势图：

下面我们来详细解释这些优势：

1. ⚡️ 极致的速度

   • 原理 ：和 Vite 一样，Vitest 使用 esbuild来编译 TypeScript/JSX，这比 Jest 使用的 tsc或 babel要快得多。
   • 效果：无论是启动测试、还是运行测试，速度都非常快。

2. 🔗 与 Vite 项目无缝集成

   • 配置共享 ：你的 vite.config.ts中的插件、解析器别名（alias）、环境变量等配置，Vitest 都可以直接使用。无需为测试环境再写一套复杂的配置。
   • 一致性：保证了你的代码在开发、构建、测试三个环节的行为完全一致。

3. 👨‍💻 出色的开发者体验（DX）

   • 智能监视模式 ：这是最大的亮点！当你修改代码后，Vitest 会智能地只重新运行与之相关的测试，而不是整个测试套件，就像测试的"热重载"。
   • 内置支持：开箱即用支持 TypeScript、JSX、ESM，无需额外配置。

4. 🔄 高度兼容 Jest 生态

   • API 兼容 ：如果你熟悉 Jest，那么上手 Vitest 几乎零成本。它支持 describe, test, expect, jest.fn()等语法。
   • 生态兼容：支持 Jest 的快照测试（Snapshot Testing）和大多数 Jest 的匹配器（Matchers）。
   • 易于迁移：从 Jest 迁移到 Vitest 非常简单。

---

三、快速上手：4步搭建你的第一个测试

假设你已有一个 Vite 项目（如 Vue、React 或纯 JavaScript/TypeScript 项目）。

步骤 1: 安装 Vitest

在你的项目根目录下运行：

npm install -D vitest
# 或
yarn add -D vitest
# 或
pnpm add -D vitest

步骤 2: 配置 Vitest

创建 vitest.config.ts文件，或者直接在已有的 vite.config.ts中配置：

方式一：独立的 vitest.config.ts

// vitest.config.ts
import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    // 指定测试文件的匹配模式
    include: ['**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
  },
})

方式二：在 vite.config.ts中合并配置（推荐，保持一致性）

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  test: { // <-- 在这里添加 test 配置项
    globals: true, // 让 describe、it、expect 等API全局可用，无需导入
  },
})

步骤 3: 编写一个简单的函数和测试用例

创建一个数学函数 math.ts：

// src/math.ts
export function add(a: number, b: number): number {
  return a + b;
}

export function multiply(a: number, b: number): number {
  return a * b;
}

为它创建测试文件 math.test.ts：

// src/math.test.ts
import { describe, it, expect } from 'vitest'; // 如果配置了 globals: true，则可省略导入
import { add, multiply } from './math';

describe('数学函数测试', () => {
  it('应该正确相加两个数字', () => {
    expect(add(1, 2)).toBe(3);
    expect(add(-1, 5)).toBe(4);
  });

  it('应该正确相乘两个数字', () => {
    expect(multiply(3, 4)).toBe(12);
    expect(multiply(0, 10)).toBe(0);
  });

  it('快照测试：确保函数输出稳定', () => {
    expect(add(10, 20)).toMatchSnapshot(); // 第一次运行会生成一个快照文件
  });
});

步骤 4: 运行测试

在 package.json中添加一个测试脚本：

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

• 启动监视模式 ：运行 npm test。这会启动 Vitest 的监视模式，当你修改代码或测试文件时，它会自动重新运行相关的测试。

  (示意图：Vitest 终端输出，绿色代表通过)

• 单次运行 ：运行 npm run test:run。这会在不启动监视模式的情况下运行一次所有测试，常用于 CI/CD 环境。

---

四、核心概念与高级特性

1. 测试套件和用例

   • describe：用于将多个相关的测试组合在一起。
   • it或 test：定义单个测试用例。

2. 断言（Assertions）

   • 使用 expect来对值进行断言。Vitest 支持大量 Jest 风格的匹配器，如 .toBe(), .toEqual(), .toBeTruthy(), .toContain()等。

3. 模拟（Mocking）

   • Vitest 提供了强大的模拟功能。

   import { vi } from 'vitest';
   
   // 模拟一个函数
   const mockFn = vi.fn();
   mockFn('hello');
   expect(mockFn).toHaveBeenCalledWith('hello');
   
   // 模拟一个模块
   vi.mock('./path/to/module', () => ({
     someExport: vi.fn(),
   }));

4. 测试覆盖率

   • 使用 @vitest/coverage包可以轻松生成覆盖率报告。

   • 安装：npm i -D @vitest/coverage

   • 配置 vitest.config.ts：

     export default defineConfig({
       test: {
         coverage: {
           provider: 'istanbul' // 或 'c8'
         }
       }
     })

   • 运行：vitest --coverage

总结：一张图掌握 Vitest 工作流