Vitest 用法详解及 Coverage Web 工具介绍
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 文档