Vitest 深度实战：从 Vite 生态到下一代测试框架的架构革命——零配置、极速 HMR 与 Jest 无缝迁移完全指南

当 Vite 重新定义了前端构建工具的速度标准，Vitest 正在用同样的方式重塑 JavaScript 测试体验。本文将深入剖析 Vitest 的架构设计、核心特性、性能优化技巧，以及如何从 Jest 无缝迁移到 Vitest，带你掌握这个 Vite 官方测试框架的全部威力。

前言：测试框架的「Vite 时刻」

2020 年，Vite 以「原生 ESM + 即时 HMR」的组合拳颠覆了前端构建工具链。仅仅两年后，Vite 团队推出了 Vitest —— 一个由 Vite 驱动的下一代测试框架。

如果你曾经被 Jest 的启动等待折磨过，或者因为修改了一个测试文件就要等好几秒才能看到结果而感到沮丧，那么 Vitest 就是为你准备的。

Vitest 的核心承诺很简单：

• ⚡ 极速启动：利用 Vite 的 ESM 原生支持，测试启动时间从秒级降到毫秒级
• 🔄 即时 HMR：修改测试文件后，只重新运行受影响的测试
• 🎯 零配置：复用 Vite 的配置，无需为测试单独维护一套配置
• 🌐 完整兼容：与 Jest 的 API 高度兼容，迁移成本极低

在本文中，我们将：

1. 深入 Vitest 的架构设计，理解它为什么这么快
2. 通过大量代码示例，掌握 Vitest 的核心特性
3. 学习如何从 Jest 无缝迁移到 Vitest
4. 探索高级特性：快照测试、Mock 系统、覆盖率报告
5. 性能优化实战：线程池、隔离模式、并行执行
6. 在实际项目中落地 Vitest 的最佳实践

第一章：Vitist 架构深度解析——为什么它这么快？

1.1 传统测试框架的性能瓶颈

要理解 Vitest 的速度从何而来，我们首先需要理解传统测试框架（如 Jest）的性能瓶颈在哪里。

Jest 的工作流程：

1. 启动 Node.js 进程
2. 递归扫描项目目录，构建依赖图
3. 将所有测试文件打包成一个或多个 bundle
4. 使用 Babel/TypeScript 编译器转译代码
5. 执行测试
6. 生成报告

这个过程的问题在于：

• 冷启动慢：每次运行都要重新扫描、打包、转译
• 增量更新低效：即使只改了一行代码，也可能触发大量重新编译
• 打包开销大：Jest 使用 JSDOM 模拟浏览器环境，打包过程复杂

1.2 Vitest 的架构创新

Vitest 的核心设计理念是：复用 Vite 的生态和架构。

Vitest 架构核心：
┌─────────────────────────────────────────┐
│         Vite Dev Server                │
│  (原生 ESM + 即时 HMR + 依赖预构建)    │
└─────────────────────────────────────────┘
                 │
                 ▼
┌─────────────────────────────────────────┐
│         Vitest Test Runner             │
│  (测试隔离 + 智能重试 + 覆盖率)         │
└─────────────────────────────────────────┘

关键架构特性：

1.2.1 原生 ESM 支持

Vitest 直接利用 Vite 的 ESM 支持，测试文件以原生 ES Module 形式运行，无需打包：

// 测试文件可以直接使用 ESM 语法
import { describe, test, expect } from 'vitest'
import { sum } from '../src/math.js'

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

1.2.2 智能依赖预构建

Vite 会将 node_modules 中的 CommonJS 模块预构建为 ESM，Vitest 直接复用这个机制：

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

export default defineConfig({
  optimizeDeps: {
    include: ['lodash-es', 'axios']
  }
})

1.2.3 即时 HMR for 测试

这是 Vitest 最快的部分。当你修改一个测试文件时：

传统 Jest：
文件修改 → 重新扫描依赖 → 重新转译 → 重新运行所有相关测试
耗时：2-5秒

Vitest HMR：
文件修改 → HMR 更新模块边界 → 只重新运行受影响的测试
耗时：50-200毫秒

实际对比数据（基于一个中型项目，1000+ 测试文件）：

1.3 Vite 配置复用机制

Vitest 最巧妙的设计之一是自动读取 Vite 配置。如果你已经有 vite.config.ts，Vitest 会自动使用它：

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

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': '/src'
    }
  }
})

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

export default defineConfig({
  ...viteConfig,
  test: {
    environment: 'happy-dom',
    globals: true
  }
})

如果同时存在 vite.config.ts 和 vitest.config.ts，Vitest 会优先使用 vitest.config.ts。

第二章：核心特性完全指南

2.1 安装与基础配置

2.1.1 安装 Vitest

# npm
npm install -D vitest

# yarn
yarn add -D vitest

# pnpm
pnpm add -D vitest

# bun
bun add -D vitest

2.1.2 package.json 配置

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

2.1.3 基础配置文件

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

export default defineConfig({
  test: {
    // 测试环境：'node' | 'jsdom' | 'happy-dom'
    environment: 'node',
    
    // 全局注入 describe, test, expect 等 API
    globals: true,
    
    // 测试文件匹配模式
    include: ['**/*.{test,spec}.{js,ts,jsx,tsx}'],
    
    // 排除文件
    exclude: ['**/node_modules/**', '**/dist/**'],
    
    // 覆盖率配置
    coverage: {
      provider: 'v8', // 或 'istanbul'
      reporter: ['text', 'json', 'html'],
      include: ['src/**/*.{js,ts}'],
      exclude: ['src/**/*.d.ts']
    }
  }
})

2.2 测试语法：从 Jest 到 Vitest 的无缝迁移

Vitest 的 API 设计故意与 Jest 高度兼容，让你的迁移成本降到最低。

2.2.1 基础测试结构

import { describe, test, expect } from 'vitest'

// Jest 风格的测试
describe('Array methods', () => {
  test('map() should transform elements', () => {
    const arr = [1, 2, 3]
    const doubled = arr.map(x => x * 2)
    expect(doubled).toEqual([2, 4, 6])
  })

  test('filter() should remove elements', () => {
    const arr = [1, 2, 3, 4, 5]
    const evens = arr.filter(x => x % 2 === 0)
    expect(evens).toEqual([2, 4])
  })
})

2.2.2 异步测试

import { test, expect } from 'vitest'

// Promise 风格
test('async test with Promise', async () => {
  const data = await fetchData()
  expect(data).toBeDefined()
})

// 回调函数风格（兼容 Jest）
test('callback style', (done) => {
  fetchDataCallback((err, data) => {
    expect(err).toBeNull()
    expect(data).toBeDefined()
    done()
  })
})

// 带超时的测试
test('test with timeout', async () => {
  vi.setConfig({ testTimeout: 5000 })
  const data = await slowApiCall()
  expect(data).toBeDefined()
}, 10000) // 测试级别超时

2.2.3 钩子函数

import { beforeAll, afterAll, beforeEach, afterEach, test } from 'vitest'

let db

beforeAll(async () => {
  // 所有测试之前执行一次
  db = await connectToDatabase()
})

afterAll(async () => {
  // 所有测试之后执行一次
  await db.close()
})

beforeEach(() => {
  // 每个测试之前执行
  cleanupTestData()
})

afterEach(() => {
  // 每个测试之后执行
  resetMocks()
})

test('test 1', () => {
  // ...
})

test('test 2', () => {
  // ...
})

2.3 断言 API：超越 Jest 的能力

Vitest 内置了 Chai 断言库，并扩展了更多实用断言。

2.3.1 基础断言

import { expect } from 'vitest'

test('basic assertions', () => {
  // 相等性
  expect(1 + 1).toBe(2)              // 严格相等 (===)
  expect({ a: 1 }).toEqual({ a: 1 }) // 深度相等
  
  // 真值检查
  expect(true).toBeTruthy()
  expect(false).toBeFalsy()
  expect(null).toBeNull()
  expect(undefined).toBeUndefined()
  expect(1).toBeDefined()
  
  // 数字比较
  expect(3.14).toBeCloseTo(3.1, 1)  // 约等于
  expect(10).toBeGreaterThan(5)
  expect(10).toBeLessThan(20)
  
  // 字符串匹配
  expect('hello world').toMatch(/hello/)
  expect('hello world').toContain('world')
  
  // 数组检查
  expect([1, 2, 3]).toContain(2)
  expect([1, 2, 3]).toHaveLength(3)
  
  // 对象检查
  expect({ a: 1, b: 2 }).toHaveProperty('a')
  expect({ a: 1, b: 2 }).toMatchObject({ a: 1 })
})

2.3.2 异常断言

test('exception assertions', () => {
  // 检查是否抛出错误
  expect(() => {
    throw new Error('boom')
  }).toThrow()
  
  expect(() => {
    throw new Error('boom')
  }).toThrow('boom')
  
  expect(() => {
    throw new Error('boom')
  }).toThrow(/boom/)
  
  // 异步函数抛出异常
  await expect(asyncFunc()).rejects.toThrow('error')
})

2.3.3 快照测试（Snapshot）

快照测试是 UI 组件测试的利器：

import { expect } from 'vitest'
import { render } from '@testing-library/react'
import MyComponent from './MyComponent'

test('component snapshot', () => {
  const { container } = render(<MyComponent title="Hello" />)
  
  // 第一次运行会生成快照文件
  // 后续运行会对比快照
  expect(container).toMatchSnapshot()
})

test('inline snapshot', () => {
  const data = { a: 1, b: 2 }
  
  // 内联快照（直接写在测试文件中）
  expect(data).toMatchInlineSnapshot(`
    Object {
      "a": 1,
      "b": 2,
    }
  `)
})

更新快照：

# 交互式更新
vitest --update

# 更新所有快照
vitest run --update

# 更新指定文件的快照
vitest run src/__tests__/component.test.tsx --update

2.4 Mock 系统：强大的 mocking 能力

Vitest 提供了比 Jest 更强大的 Mock 系统。

2.4.1 函数 Mock

import { vi, test, expect } from 'vitest'

test('mock function', () => {
  const mockFn = vi.fn()
  
  mockFn('hello', 42)
  mockFn('world', 100)
  
  // 检查调用次数
  expect(mockFn).toHaveBeenCalledTimes(2)
  
  // 检查调用参数
  expect(mockFn).toHaveBeenCalledWith('hello', 42)
  expect(mockFn).toHaveBeenNthCalledWith(2, 'world', 100)
  
  // 检查返回值
  mockFn.mockReturnValue(99)
  expect(mockFn()).toBe(99)
  
  // 模拟实现
  mockFn.mockImplementation((x) => x * 2)
  expect(mockFn(5)).toBe(10)
})

2.4.2 模块 Mock

import { vi, test, expect } from 'vitest'
import { getUser } from './api'  // 要 mock 的模块

// 自动 mock 整个模块
vi.mock('./api')

test('mock module', async () => {
  // 设置 mock 返回值
  vi.mocked(getUser).mockResolvedValue({ id: 1, name: 'Alice' })
  
  const user = await getUser(1)
  expect(user.name).toBe('Alice')
})

// 部分 mock
vi.mock('./api', async (importOriginal) => {
  const actual = await importOriginal()
  return {
    ...actual,
    getUser: vi.fn().mockResolvedValue({ id: 1 })
  }
})

2.4.3 定时器 Mock

import { vi, test, expect } from 'vitest'

test('timer mock', async () => {
  vi.useFakeTimers()
  
  const callback = vi.fn()
  
  // 模拟 setTimeout
  setTimeout(callback, 1000)
  
  // 快进时间
  vi.advanceTimersByTime(1000)
  
  expect(callback).toHaveBeenCalledTimes(1)
  
  // 恢复真实定时器
  vi.useRealTimers()
})

2.4.4 请求 Mock

import { vi, test, expect } from 'vitest'
import { fetchData } from './api'

// Mock fetch API
global.fetch = vi.fn()

test('mock fetch', async () => {
  // 模拟成功响应
  vi.mocked(fetch).mockResolvedValue({
    ok: true,
    json: async () => ({ data: 'test' })
  } as Response)
  
  const result = await fetchData()
  expect(result).toEqual({ data: 'test' })
  
  // 模拟失败响应
  vi.mocked(fetch).mockResolvedValue({
    ok: false,
    status: 404
  } as Response)
  
  await expect(fetchData()).rejects.toThrow('404')
})

第三章：从 Jest 到 Vitest 的零成本迁移

3.1 为什么应该迁移到 Vitest？

3.2 迁移步骤

步骤 1：安装 Vitest

npm uninstall jest
npm install -D vitest @vitest/coverage-v8

步骤 2：更新 npm scripts

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

步骤 3：创建 vitest.config.ts

import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './test/setup.ts',
    
    // Jest 兼容配置
    restoreMocks: true,
    mockReset: true
  }
})

步骤 4：更新测试文件

Jest 风格：

// jest.config.js
module.exports = {
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/test/setup.js'],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  }
}

Vitest 风格：

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

export default defineConfig({
  test: {
    environment: 'jsdom',
    setupFiles: ['./test/setup.ts']
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})

步骤 5：处理 API 差异

虽然 Vitest 极力兼容 Jest，但仍有少量 API 差异：

// Jest
jest.fn()        →  // Vitest: vi.fn()
jest.mock()      →  // Vitest: vi.mock()
jest.spyOn()     →  // Vitest: vi.spyOn()
jest.clearAllMocks() → // Vitest: vi.clearAllMocks()

// 全局钩子
beforeAll        →  // 相同
afterAll         →  // 相同
beforeEach       →  // 相同
afterEach        →  // 相同

自动迁移脚本：

# 使用 sed 批量替换
find ./src -type f -name "*.test.ts" -exec sed -i '' 's/jest\./vi./g' {} +

3.3 常见问题与解决方案

问题 1：Mock 不生效

原因：Vitest 的 vi.mock() 是提升的（hoisted），不能在使用后声明。

错误写法：

import { getUser } from './api'
vi.mock('./api')  // 这行会被提升到 import 之前

正确写法：

// vi.mock() 必须在使用前声明（实际上会自动提升）
vi.mock('./api')

import { getUser } from './api'  // 这行会被自动移动到 mock 之后

问题 2：ESM 模块无法 Mock

解决方案：使用 vi.mocked() 包装

import { vi } from 'vitest'
import * as api from './api'

vi.mocked(api.getUser).mockResolvedValue({})

问题 3：JSDOM 环境变量缺失

解决方案：安装 jsdom 并在配置中指定

npm install -D jsdom

// vitest.config.ts
export default defineConfig({
  test: {
    environment: 'jsdom'
  }
})

第四章：高级特性与性能优化

4.1 测试隔离与并行执行

4.1.1 隔离模式（Isolation）

Vitest 支持三种隔离模式：

// vitest.config.ts
export default defineConfig({
  test: {
    // 默认：每个测试文件在隔离环境中运行
    isolate: true,
    
    // 关闭隔离可以提升速度（但可能导致测试间状态污染）
    // isolate: false,
    
    // 使用 worker threads（默认）
    pool: 'threads',
    
    // 或使用 forks（子进程）
    // pool: 'forks',
    
    // 或使用 vm threads（轻量级）
    // pool: 'vmThreads'
  }
})

性能对比：

4.1.2 并行执行配置

export default defineConfig({
  test: {
    // 最大并行数（默认：CPU 核心数）
    maxWorkers: 4,
    
    // 或按百分比
    maxWorkers: '50%',
    
    // 最小并行数
    minWorkers: 1
  }
})

命令行控制：

# 指定并行数
vitest run --pool=threads --poolOptions='{"threads":{"maxThreads":4}}'

# 单线程运行（调试时用）
vitest run --no-threads

4.2 覆盖率报告深度配置

4.2.1 使用 v8 覆盖率

export default defineConfig({
  test: {
    coverage: {
      provider: 'v8',  // 基于 Node.js v8 引擎
      reporter: ['text', 'json', 'html', 'lcov'],
      
      // 包含/排除文件
      include: ['src/**/*.{js,ts,jsx,tsx}'],
      exclude: [
        'src/**/*.d.ts',
        'src/**/*.test.{js,ts}',
        'src/**/*.spec.{js,ts}'
      ],
      
      // 覆盖率阈值
      lines: 80,
      functions: 80,
      branches: 70,
      statements: 80
    }
  }
})

4.2.2 使用 Istanbul 覆盖率

export default defineConfig({
  test: {
    coverage: {
      provider: 'istanbul',  // 更精确但更慢
      reporter: ['text', 'html', 'cobertura'],
      
      // 100% 覆盖率强制要求
      lines: 100,
      functions: 100,
      branches: 100,
      statements: 100,
      
      // 未达到阈值时失败
      enforcePercentage: true
    }
  }
})

4.3 测试报告器（Reporters）

Vitest 内置多种报告器，也支持自定义：

export default defineConfig({
  test: {
    // 单一报告器
    reporters: ['verbose'],
    
    // 多个报告器
    reporters: [
      'default',              // 控制台默认输出
      'verbose',              // 详细输出
      ['junit', { outputFile: 'test-results.xml' }],  // JUnit 格式（CI 用）
      ['html', { outputFile: 'test-report.html' }]    // HTML 报告
    ]
  }
})

自定义报告器：

// custom-reporter.ts
export default class CustomReporter {
  onInit(ctx) {
    console.log('Test run started')
  }
  
  onTestResult(test, testResult) {
    console.log(`Test ${test.name}: ${testResult.status}`)
  }
  
  onFinished(testResults) {
    console.log('All tests finished')
  }
}

// vitest.config.ts
export default defineConfig({
  test: {
    reporters: ['default', './custom-reporter.ts']
  }
})

4.4 浏览器原生测试（Experimental）

Vitest 支持在真实浏览器中运行测试：

export default defineConfig({
  test: {
    // 使用浏览器环境
    environment: 'node',
    
    // 浏览器配置
    browser: {
      enabled: true,
      name: 'chrome',  // 'chrome' | 'firefox' | 'safari'
      headless: true,
      
      // 或提供 provider
      provider: 'playwright',  // 需要安装 @vitest/browser-playwright
      // provider: 'webdriverio'  // 需要安装 @vitest/browser-webdriverio
    }
  }
})

第五章：实战项目——构建完整的测试体系

5.1 项目初始化

让我们创建一个完整的 Vue 3 + TypeScript 项目，并配置 Vitest：

# 创建 Vite 项目
npm create vite@latest my-app -- --template vue-ts

cd my-app

# 安装依赖
npm install

# 安装 Vitest 及相关包
npm install -D vitest @vitest/coverage-v8 \
  @testing-library/vue @testing-library/jest-dom \
  jsdom

5.2 完整项目配置

vitest.config.ts

import { defineConfig } from 'vitest/config'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  plugins: [vue()],
  
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  },
  
  test: {
    globals: true,
    environment: 'jsdom',
    
    // 设置文件
    setupFiles: './test/setup.ts',
    
    // 测试文件位置
    include: [
      'src/**/*.{test,spec}.{js,ts,jsx,tsx}',
      'test/**/*.{test,spec}.{js,ts}'
    ],
    
    // 排除
    exclude: ['node_modules', 'dist', '.idea', '.git', '.cache'],
    
    // 覆盖率
    coverage: {
      provider: 'v8',
      reporter: ['text', 'json', 'html'],
      include: ['src/**/*.{js,ts,vue}'],
      exclude: [
        'src/**/*.d.ts',
        'src/**/*.test.{js,ts}',
        'src/**/*.spec.{js,ts}',
        'src/main.ts',
        'src/env.d.ts'
      ],
      lines: 80,
      functions: 80,
      branches: 70,
      statements: 80
    },
    
    // 性能优化
    pool: 'threads',
    maxWorkers: '50%',
    isolate: true
  }
})

test/setup.ts

import { expect } from 'vitest'
import * as matchers from '@testing-library/jest-dom/matchers'

// 扩展 Vitest 的断言 matcher
expect.extend(matchers)

// 全局设置
beforeAll(async () => {
  // 初始化测试数据库
  await initTestDatabase()
})

afterAll(async () => {
  // 清理
  await closeTestDatabase()
})

// Mock 全局对象
global.ResizeObserver = class ResizeObserver {
  observe() {}
  unobserve() {}
  disconnect() {}
}

// Mock IntersectionObserver
global.IntersectionObserver = class IntersectionObserver {
  constructor(callback) {
    this.callback = callback
  }
  observe() {}
  unobserve() {}
  disconnect() {}
}

5.3 单元测试示例

src/composables/useCounter.ts

import { ref } from 'vue'

export function useCounter(initialValue = 0) {
  const count = ref(initialValue)
  
  const increment = () => {
    count.value++
  }
  
  const decrement = () => {
    count.value--
  }
  
  const reset = () => {
    count.value = initialValue
  }
  
  return {
    count: count,
    increment,
    decrement,
    reset
  }
}

test/useCounter.test.ts

import { describe, test, expect } from 'vitest'
import { useCounter } from '@/composables/useCounter'

describe('useCounter', () => {
  test('should initialize with correct value', () => {
    const { count } = useCounter(10)
    expect(count.value).toBe(10)
  })
  
  test('should increment correctly', () => {
    const { count, increment } = useCounter(0)
    
    increment()
    expect(count.value).toBe(1)
    
    increment()
    expect(count.value).toBe(2)
  })
  
  test('should decrement correctly', () => {
    const { count, decrement } = useCounter(10)
    
    decrement()
    expect(count.value).toBe(9)
  })
  
  test('should reset correctly', () => {
    const { count, increment, reset } = useCounter(0)
    
    increment()
    increment()
    expect(count.value).toBe(2)
    
    reset()
    expect(count.value).toBe(0)
  })
})

5.4 组件测试示例

src/components/Counter.vue

<script setup lang="ts">
import { useCounter } from '@/composables/useCounter'

const { count, increment, decrement, reset } = useCounter(0)
</script>

<template>
  <div>
    <h1>Count: {{ count }}</h1>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="reset">Reset</button>
  </div>
</template>

test/Counter.test.ts

import { describe, test, expect } from 'vitest'
import { render, screen, fireEvent } from '@testing-library/vue'
import Counter from '@/components/Counter.vue'

describe('Counter.vue', () => {
  test('renders correctly', () => {
    render(Counter)
    
    expect(screen.getByText('Count: 0')).toBeInTheDocument()
  })
  
  test('increments when + button is clicked', async () => {
    render(Counter)
    
    const button = screen.getByText('+')
    await fireEvent.click(button)
    
    expect(screen.getByText('Count: 1')).toBeInTheDocument()
  })
  
  test('decrements when - button is clicked', async () => {
    render(Counter)
    
    const button = screen.getByText('-')
    await fireEvent.click(button)
    
    expect(screen.getByText('Count: -1')).toBeInTheDocument()
  })
  
  test('resets when Reset button is clicked', async () => {
    render(Counter)
    
    const incrementBtn = screen.getByText('+')
    await fireEvent.click(incrementBtn)
    await fireEvent.click(incrementBtn)
    
    expect(screen.getByText('Count: 2')).toBeInTheDocument()
    
    const resetBtn = screen.getByText('Reset')
    await fireEvent.click(resetBtn)
    
    expect(screen.getByText('Count: 0')).toBeInTheDocument()
  })
})

5.5 API 测试示例

src/api/user.ts

import axios from 'axios'

export interface User {
  id: number
  name: string
  email: string
}

export async function getUser(id: number): Promise<User> {
  const response = await axios.get(`/api/users/${id}`)
  return response.data
}

export async function createUser(user: Omit<User, 'id'>): Promise<User> {
  const response = await axios.post('/api/users', user)
  return response.data
}

test/api/user.test.ts

import { describe, test, expect, vi, beforeEach } from 'vitest'
import axios from 'axios'
import { getUser, createUser } from '@/api/user'

// Mock axios
vi.mock('axios')
const mockedAxios = axios as jest.Mocked<typeof axios>

describe('User API', () => {
  beforeEach(() => {
    vi.clearAllMocks()
  })
  
  test('getUser should fetch user by id', async () => {
    const mockUser = {
      id: 1,
      name: 'Alice',
      email: 'alice@example.com'
    }
    
    mockedAxios.get.mockResolvedValue({ data: mockUser })
    
    const user = await getUser(1)
    
    expect(mockedAxios.get).toHaveBeenCalledWith('/api/users/1')
    expect(user).toEqual(mockUser)
  })
  
  test('createUser should post user data', async () => {
    const newUser = {
      name: 'Bob',
      email: 'bob@example.com'
    }
    
    const createdUser = {
      id: 2,
      ...newUser
    }
    
    mockedAxios.post.mockResolvedValue({ data: createdUser })
    
    const result = await createUser(newUser)
    
    expect(mockedAxios.post).toHaveBeenCalledWith('/api/users', newUser)
    expect(result).toEqual(createdUser)
  })
  
  test('getUser should handle errors', async () => {
    mockedAxios.get.mockRejectedValue(new Error('Network error'))
    
    await expect(getUser(999)).rejects.toThrow('Network error')
  })
})

第六章：性能优化与最佳实践

6.1 提升测试速度的 10 个技巧

技巧 1：关闭隔离模式（谨慎使用）

// vitest.config.ts
export default defineConfig({
  test: {
    // 关闭隔离可以提升 20-30% 速度
    // 但可能导致测试间状态污染
    isolate: false
  }
})

技巧 2：使用 happy-dom 替代 jsdom

export default defineConfig({
  test: {
    // happy-dom 比 jsdom 快 5-10 倍
    environment: 'happy-dom'
  }
})

jsdom vs happy-dom 对比：

技巧 3：减少快照文件大小

// ❌ 错误：快照过大
expect(largeObject).toMatchSnapshot()

// ✅ 正确：只快照关键部分
expect(largeObject.key).toMatchSnapshot()
expect(largeObject.items.length).toMatchSnapshot()

技巧 4：使用 vi.mocked() 而非 vi.mock()

// ❌ 慢：每次都 mock 整个模块
vi.mock('./api')

// ✅ 快：只 mock 需要的函数
import * as api from './api'
vi.mocked(api.getUser).mockResolvedValue({})

技巧 5：并行执行优化

export default defineConfig({
  test: {
    // 根据 CI 环境动态调整
    maxWorkers: process.env.CI ? '75%' : '50%'
  }
})

技巧 6：使用 --no-file-parallelism

# 同一文件内的测试串行执行，但不同文件并行
vitest run --no-file-parallelism

技巧 7：缓存依赖预构建

# Vite 的依赖预构建结果会被缓存
# 确保 node_modules/.vite 目录被缓存（在 CI 中）

技巧 8：减少测试文件数量

// ❌ 错误：每个函数一个测试文件
// user.test.ts
// post.test.ts
// comment.test.ts

// ✅ 正确：按模块组织测试
// api.test.ts (包含 user, post, comment 的测试)

技巧 9：使用 beforeAll 复用昂贵操作

// ❌ 慢：每个测试都连接数据库
beforeEach(async () => {
  db = await connectToDatabase()
})

// ✅ 快：只连接一次
let db: Database

beforeAll(async () => {
  db = await connectToDatabase()
})

afterAll(async () => {
  await db.close()
})

技巧 10：使用 vi.setSystemTime() 替代真实定时器

// ❌ 慢：真实定时器
setTimeout(callback, 5000)

// ✅ 快：模拟时间
vi.setSystemTime(new Date('2026-01-01'))

6.2 CI/CD 集成最佳实践

GitHub Actions 配置

# .github/workflows/test.yml
name: Tests

on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    
    steps:
      - uses: actions/checkout@v4
      
      - uses: actions/setup-node@v4
        with:
          node-version: '22'
          cache: 'npm'
      
      - name: Install dependencies
        run: npm ci
      
      - name: Run tests
        run: npm run test:run -- --coverage
      
      - name: Upload coverage
        uses: codecov/codecov-action@v4
        with:
          files: ./coverage/coverage-final.json

Jenkins Pipeline 配置

pipeline {
    agent any
    
    stages {
        stage('Install') {
            steps {
                sh 'npm ci'
            }
        }
        
        stage('Test') {
            steps {
                sh 'npm run test:run -- --coverage'
            }
        }
        
        stage('Report') {
            steps {
                publishHTML([
                    reportDir: 'coverage',
                    reportFiles: 'index.html',
                    reportName: 'Coverage Report'
                ])
            }
        }
    }
}

6.3 调试技巧

使用 VS Code 调试

// .vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug Vitest",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "test"],
      "args": ["--", "--inspect-brk"],
      "skipFiles": ["<node_internals>/**"]
    }
  ]
}

使用 Chrome DevTools 调试

# 启动调试模式
node --inspect-brk ./node_modules/.bin/vitest run

# 然后在 Chrome 中打开 chrome://inspect

第七章：未来展望与生态发展

7.1 Vitest 的发展路线图

根据 Vitest 团队的规划，未来版本将聚焦以下方向：

1. 浏览器原生测试：在真实浏览器中运行测试，提供更好的兼容性
2. WebAssembly 支持：测试 WASM 模块
3. 更好的 TypeScript 集成：利用 TypeScript 的编译器 API 进行类型检查
4. 并行测试优化：更智能的测试用例调度算法
5. 插件系统：允许第三方扩展 Vitest 的功能

7.2 与 Vite 生态的深度融合

Vitest 将继续与 Vite 保持同步发展：

• Vite 6 支持：充分利用 Vite 6 的新特性
• Rolldown 集成：当 Vite 切换到 Rolldown 后，Vitest 也会跟进
• 环境隔离：更好的 workerd (Cloudflare Workers) 支持

7.3 社区生态现状

截至 2026 年 5 月，Vitest 的生态系统已经相当成熟：

• 下载量：npm 周下载量超过 500 万
• GitHub Stars：超过 14k
• 贡献者：200+ 贡献者
• 插件生态：50+ 第三方插件

主流框架的 Vitest 支持：

总结

Vitest 不仅仅是一个测试框架，它代表了 Vite 生态系统向前迈出的重要一步。通过原生 ESM 支持、即时 HMR、零配置复用 Vite 配置等创新，Vitest 正在重新定义 JavaScript 测试的速度标准和开发体验。

关键要点回顾：

1. 极速启动：利用 Vite 的 ESM 原生支持，启动速度提升 15 倍以上
2. 即时反馈：HMR 技术支持，修改后 50-200ms 内看到测试结果
3. 零成本迁移：与 Jest API 高度兼容，迁移成本低
4. 强大生态：复用 Vite 插件生态，支持所有主流前端框架
5. 灵活配置：支持多种隔离模式、并行策略、覆盖率报告

如果你还在使用 Jest，或者正在为新项目选择测试框架，Vitest 绝对值得一试。它不仅能提升你的测试效率，还能让你享受到 Vite 生态带来的诸多好处。

下一步行动：

1. 在现有项目中试用 Vitest（可以先并行运行）
2. 阅读官方文档：https://vitest.dev
3. 加入 Discord 社区：https://chat.vitest.dev
4. 尝试高级特性：浏览器测试、覆盖率报告、自定义 reporter

测试愉快！🚀

参考资源

• 官方文档: https://vitest.dev
• GitHub 仓库: https://github.com/vitest-dev/vitest
• Discord 社区: https://chat.vitest.dev
• Vite 官方文档: https://vitejs.dev
• Jest 迁移指南: https://vitest.dev/guide/migration.html
• 示例项目集: https://github.com/vitest-dev/vitest/tree/main/examples

本文撰写于 2026 年 5 月，基于 Vitest 最新稳定版本。如有更新，请参考官方文档。

字数统计：约 15,000 字