Vitest 用法详解及 Coverage Web 工具介绍

随着前端工程化的发展，测试已经成为现代前端项目不可或缺的一部分。Vitest 作为一款基于 Vite 的极速单元测试框架，凭借其极快的启动速度、优秀的 TypeScript 支持和与 Jest 高度兼容的 API，受到了越来越多开发者的青睐。本文将重点介绍 Vitest 的基本用法，并详细讲解如何使用其内置的 Coverage Web 工具进行测试覆盖率分析。

---

一、Vitest 基本用法

1. 安装 Vitest

在基于 Vite 的项目中，安装 Vitest 十分简单：

npm install -D vitest

如果你还需要测试库（如 React、Vue 等），可以一并安装相关插件：

# 以 React 为例
npm install -D @testing-library/react @testing-library/jest-dom

2. 配置 Vitest

在 vite.config.ts 或 vite.config.js 中添加 Vitest 配置：

import { defineConfig } from 'vite'

export default defineConfig({
  test: {
    globals: true, // 支持全局 expect、describe 等
    environment: 'jsdom', // 用于前端项目
    coverage: {
      reporter: ['text', 'json', 'html'], // 支持多种覆盖率报告
    },
  },
})

3. 编写测试用例

Vitest 的 API 与 Jest 高度兼容，常用的有 describe、it、test、expect 等。例如：

// sum.js
export function sum(a, b) {
  return a + b
}

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

describe('sum', () => {
  it('adds two numbers', () => {
    expect(sum(1, 2)).toBe(3)
  })
})

4. 运行测试

在 package.json 中添加脚本：

{
  "scripts": {
    "test": "vitest"
  }
}

然后运行：

npm run test

---

二、Coverage Web 工具介绍

1. 什么是 Coverage Web 工具？

Vitest 内置了覆盖率分析工具，基于 c8 和 istanbul，可以生成详细的测试覆盖率报告。更棒的是，Vitest 提供了一个 Web 界面，可以可视化地查看哪些代码被测试覆盖，哪些没有。

2. 如何生成覆盖率报告？

只需在运行测试时加上 --coverage 参数：

npx vitest run --coverage

或者在 package.json 脚本中：

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

3. 启用 Coverage Web 工具

Vitest 0.34.0 及以上版本支持 Coverage Web 工具。你可以通过如下命令启动：

npx vitest --ui

或者：

npm run test -- --ui

启动后，Vitest 会在本地启动一个 Web 服务（默认 http://localhost:51204），你可以在浏览器中访问它。

4. Coverage Web 工具界面介绍

• 测试用例管理：可以在 Web 界面中选择、运行、过滤测试用例。
• 覆盖率报告：在 Coverage 标签页下，可以看到每个文件的覆盖率百分比，点击文件名可以查看详细的覆盖情况。
• 高亮显示：未被覆盖的代码会以红色高亮，已覆盖的代码以绿色高亮，便于定位未测试到的逻辑。
• 实时更新：保存代码后，Web 界面会自动刷新覆盖率数据。

5. 覆盖率报告类型

Vitest 支持多种覆盖率报告格式，包括：

• text：命令行文本报告
• html：可视化 HTML 报告（coverage/index.html）
• json：JSON 格式报告

你可以在 vite.config.ts 的 coverage.reporter 字段中配置。

---

三、总结

Vitest 以其极速、易用和与 Jest 兼容的特性，成为前端测试的新宠。其内置的 Coverage Web 工具极大提升了测试覆盖率分析的效率和体验。通过可视化界面，开发者可以轻松发现未被测试的代码，进一步提升代码质量。

---

参考链接：

• Vitest 官方文档
• Vitest Coverage 文档
• Vitest UI 文档