vitest

何时使用此技能

在用户希望执行以下操作时使用此技能：

• 在 Vite 项目中设置 Vitest
• 编写单元测试和组件测试
• 为不同环境配置 Vitest
• 使用 Vitest API 和实用工具
• 测试 Vue、React 或 Svelte 组件
• 使用浏览器模式进行测试
• 设置视觉回归测试
• 模拟函数和模块
• 使用快照进行测试
• 配置测试覆盖率
• 使用 Vitest UI
• 优化测试性能
• 调试测试
• 了解 Vitest 最佳实践
• 排查 Vitest 问题

如何使用此技能

此技能按照 Vitest 官方文档的结构组织（https://vitest.dev/guide/、https://vitest.dev/api/、https://vitest.dev/config/）。使用 Vitest 时：

1. 根据用户的请求确定主题：

   • 入门/快速开始 → examples/getting-started.md
   • 功能特性 → examples/features.md
   • 组件测试 → examples/component-testing.md
   • 浏览器模式 → examples/browser-mode.md
   • API/API 文档 → api/
   • 配置 → examples/config/

2. 从 examples/ 目录加载相应的示例文件：

   入门（快速开始）：

   • examples/getting-started.md - 安装和第一个测试

   功能特性：

   • examples/features.md - 主要功能和能力
   • examples/ui.md - Vitest UI
   • examples/component-testing.md - 组件测试
   • examples/browser-mode.md - 浏览器模式测试
   • examples/visual-regression-testing.md - 视觉回归测试
   • examples/trace-view.md - 跟踪视图

   测试：

   • examples/test-api.md - 测试 API（test、it、describe 等）
   • examples/mocking.md - 模拟函数和模块
   • examples/snapshots.md - 快照测试
   • examples/coverage.md - 代码覆盖率

   配置：

   • examples/config/basic-config.md - 基本配置
   • examples/config/environment.md - 环境配置
   • examples/config/browser-config.md - 浏览器模式配置

3. 遵循相应示例文件中的具体说明，了解语法、结构和最佳实践

   重要说明：

   • Vitest 专为 Vite 项目设计
   • 开箱即支持 TypeScript、JSX 和 ESM
   • 提供快速监视模式，体验类似 HMR
   • 兼容 Jest API
   • 示例同时包含 JavaScript 和 TypeScript 版本
   • 每个示例文件都包含关键概念、代码示例和要点

4. 必要时参考 api/ 目录中的 API 文档：

   • api/test-api.md - 测试 API 参考
   • api/vi-utility.md - vi 实用函数
   • api/expect.md - Expect 断言
   • api/mocking.md - 模拟 API

5. 使用 templates/ 目录中的模板：

   • templates/vitest-config.md - Vitest 配置模板
   • templates/test-examples.md - 测试示例模板

文档映射（一一对应 https://vitest.dev/guide/、https://vitest.dev/api/、https://vitest.dev/config/）

指南（指南）：

• examples/getting-started.md → https://vitest.dev/guide/getting-started.html
• examples/features.md → https://vitest.dev/guide/features.html
• examples/ui.md → https://vitest.dev/guide/ui.html
• examples/component-testing.md → https://vitest.dev/guide/testing-components.html
• examples/browser-mode.md → https://vitest.dev/guide/browser.html
• examples/visual-regression-testing.md → https://vitest.dev/guide/visual-regression.html
• examples/trace-view.md → https://vitest.dev/guide/trace-view.html
• examples/mocking.md → https://vitest.dev/guide/mocking.html
• examples/snapshots.md → https://vitest.dev/guide/snapshot.html
• examples/coverage.md → https://vitest.dev/guide/coverage.html

配置（配置）：

• examples/config/basic-config.md → https://vitest.dev/config/
• examples/config/environment.md → https://vitest.dev/config/#environment
• examples/config/browser-config.md → https://vitest.dev/config/#browser

API 参考：

• api/test-api.md → https://vitest.dev/api/
• api/vi-utility.md → https://vitest.dev/api/vi.html
• api/expect.md → https://vitest.dev/api/expect.html
• api/mocking.md → https://vitest.dev/api/vi.html

示例和模板

此技能包含详细示例，其组织结构与官方文档一致。所有示例都位于 examples/ 目录中（参见上方映射）。

使用示例：

• 根据用户请求确定主题
• 从上方映射中加载相应的示例文件
• 遵循该文件中的说明、语法和最佳实践
• 根据具体用例调整代码示例

使用模板：

• 参考 templates/ 目录中的模板，进行常见的脚手架搭建
• 根据具体需求和编码风格调整模板

最佳实践

1. 使用监视模式：利用 Vitest 的智能监视模式，更快获得反馈
2. 组织测试：使用 describe 块对相关测试进行分组
3. 使用 TypeScript：充分利用原生 TypeScript 支持
4. 有效模拟：使用 vi.mock() 模拟模块
5. 测试组件：使用组件测试来测试 Vue/React 组件
6. 使用 UI 模式：使用 --ui 标志，获得更好的测试调试体验
7. 优化性能：开发期间使用 test.only()

资源

• 官方文档：https://vitest.dev/
• 入门指南：https://vitest.dev/guide/
• API 参考：https://vitest.dev/api/
• 配置：https://vitest.dev/config/
• GitHub 仓库：https://github.com/vitest-dev/vitest

关键词

Vitest, vitest, 测试框架, 单元测试, 组件测试, Vite, 兼容 Jest, 监视模式, HMR, TypeScript, ESM, 模拟, 快照, 覆盖率, 浏览器模式, 视觉回归测试, 测试框架, 单元测试, 组件测试, 监视模式, 热模块替换, 模拟, 快照, 覆盖率, 浏览器模式, 视觉回归测试