Vitest #

什么是 Vitest？ #

Vitest 是由 Vite 和 Vue.js 团队开发的下一代测试框架，专为 Vite 构建的项目设计。它利用 Vite 的转换管道，提供极速的测试体验，原生支持 ESM、TypeScript、JSX 等现代前端技术栈。

核心定位 #

text

┌─────────────────────────────────────────────────────────────┐
│                         Vitest                               │
├─────────────────────────────────────────────────────────────┤
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐         │
│  │  Vite 原生   │  │  极速执行    │  │  ESM 支持   │         │
│  └─────────────┘  └─────────────┘  └─────────────┘         │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐         │
│  │  Jest 兼容   │  │  TypeScript │  │  内置覆盖率  │         │
│  └─────────────┘  └─────────────┘  └─────────────┘         │
└─────────────────────────────────────────────────────────────┘

为什么选择 Vitest？ #

优势 #

text

✅ Vite 原生集成
   - 共享 Vite 配置
   - 共享插件生态
   - 零额外配置

✅ 极速执行
   - 毫秒级启动
   - 智能监听
   - 按需编译

✅ Jest 兼容 API
   - 平滑迁移
   - 学习成本低
   - 生态兼容

✅ 开箱即用
   - TypeScript 支持
   - JSX 支持
   - ESM 支持
   - 内置覆盖率

快速开始 #

安装 #

bash

npm install --save-dev vitest

编写测试 #

typescript

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

// sum.test.ts
import { describe, it, expect } from 'vitest';
import { sum } from './sum';

describe('sum', () => {
  it('adds 1 + 2 to equal 3', () => {
    expect(sum(1, 2)).toBe(3);
  });
});

运行测试 #

bash

npx vitest

文档结构 #

text

Vitest 文档
├── 入门基础
│   ├── Vitest 简介
│   ├── 安装与配置
│   ├── 编写第一个测试
│   ├── 使用断言
│   └── 测试生命周期
│
├── 核心功能
│   ├── 异步测试
│   ├── Mock 功能
│   ├── 快照测试
│   └── DOM 测试
│
└── 高级特性
    ├── 自定义配置
    ├── 浏览器模式
    ├── 性能测试
    └── 代码覆盖率

Vitest vs Jest #

特性	Vitest	Jest
Vite 集成	✅ 原生支持	❌ 需要配置
ESM 支持	✅ 原生支持	⚠️ 需要配置
启动速度	✅ 极快	⚠️ 较慢
配置复杂度	✅ 零配置	⚠️ 需要配置
TypeScript	✅ 原生支持	⚠️ 需要 ts-jest
生态系统	🔄 发展中	✅ 成熟

学习路径 #

text

入门阶段
├── Vitest 简介
├── 安装与配置
├── 编写第一个测试
├── 使用断言
└── 测试生命周期

进阶阶段
├── 异步测试
├── Mock 功能
├── 快照测试
└── DOM 测试

高级阶段
├── 自定义配置
├── 浏览器模式
├── 性能测试
└── 代码覆盖率

下一步 #

现在你已经了解了 Vitest 的基本概念，接下来学习 Vitest 简介，开始编写你的第一个测试！