vitest

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

When to use this skill

何时使用本技能

Use this skill whenever the user wants to:

Set up Vitest in a Vite project
Write unit tests and component tests
Configure Vitest for different environments
Use Vitest API and utilities
Test Vue, React, or Svelte components
Use browser mode for testing
Set up visual regression testing
Mock functions and modules
Use snapshots for testing
Configure test coverage
Use Vitest UI
Optimize test performance
Debug tests
Understand Vitest best practices
Troubleshoot Vitest issues

当用户有以下需求时，可使用本技能：

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

How to use this skill

如何使用本技能

This skill is organized to match the Vitest official documentation structure (https://vitest.dev/guide/, https://vitest.dev/api/, https://vitest.dev/config/). When working with Vitest:

Identify the topic from the user's request:
- Getting started/快速开始 →
```
examples/getting-started.md
```
- Features/功能特性 →
```
examples/features.md
```
- Component testing/组件测试 →
```
examples/component-testing.md
```
- Browser mode/浏览器模式 →
```
examples/browser-mode.md
```
- API/API 文档 →
```
api/
```
- Configuration/配置 →
```
examples/config/
```
Load the appropriate example file from the
```
examples/
```
directory:
Getting Started (快速开始):
- ```
examples/getting-started.md
```
  - Installation and first test
Features (功能特性):
- ```
examples/features.md
```
  - Key features and capabilities
- ```
examples/ui.md
```
  - Vitest UI
- ```
examples/component-testing.md
```
  - Component testing
- ```
examples/browser-mode.md
```
  - Browser mode testing
- ```
examples/visual-regression-testing.md
```
  - Visual regression testing
- ```
examples/trace-view.md
```
  - Trace view
Testing (测试):
- ```
examples/test-api.md
```
  - Test API (test, it, describe, etc.)
- ```
examples/mocking.md
```
  - Mocking functions and modules
- ```
examples/snapshots.md
```
  - Snapshot testing
- ```
examples/coverage.md
```
  - Code coverage
Configuration (配置):
- ```
examples/config/basic-config.md
```
  - Basic configuration
- ```
examples/config/environment.md
```
  - Environment configuration
- ```
examples/config/browser-config.md
```
  - Browser mode configuration
Follow the specific instructions in that example file for syntax, structure, and best practices

Important Notes:
- Vitest is designed for Vite projects
- Supports TypeScript, JSX, ESM out of the box
- Fast watch mode with HMR-like experience
- Compatible with Jest API
- Examples include both JavaScript and TypeScript versions
- Each example file includes key concepts, code examples, and key points
Reference API documentation in the
```
api/
```
directory when needed:
- ```
api/test-api.md
```
  - Test API reference
- ```
api/vi-utility.md
```
  - vi utility functions
- ```
api/expect.md
```
  - Expect assertions
- ```
api/mocking.md
```
  - Mocking API
Use templates from the
```
templates/
```
directory:
- ```
templates/vitest-config.md
```
  - Vitest configuration templates
- ```
templates/test-examples.md
```
  - Test example templates

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

从用户需求中确定主题：
- 快速开始 →
```
examples/getting-started.md
```
- 功能特性 →
```
examples/features.md
```
- 组件测试 →
```
examples/component-testing.md
```
- 浏览器模式 →
```
examples/browser-mode.md
```
- API文档 →
```
api/
```
- 配置 →
```
examples/config/
```

从
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
```
- 浏览器模式配置

遵循示例文件中的具体说明，包括语法、结构和最佳实践

重要说明:
- Vitest专为Vite项目设计
- 原生支持TypeScript、JSX、ESM
- 具备类HMR体验的快速监视模式
- 兼容Jest API
- 示例包含JavaScript和TypeScript两种版本
- 每个示例文件都涵盖核心概念、代码示例和关键点
必要时参考
api/
目录中的API文档:
- ```
api/test-api.md
```
  - 测试API参考
- ```
api/vi-utility.md
```
  - vi工具函数
- ```
api/expect.md
```
  - Expect断言
- ```
api/mocking.md
```
  - 模拟API
使用
templates/
目录中的模板:
- ```
templates/vitest-config.md
```
  - Vitest配置模板
- ```
templates/test-examples.md
```
  - 测试示例模板

Doc mapping (one-to-one with https://vitest.dev/guide/, https://vitest.dev/api/, https://vitest.dev/config/)

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

Guide (指南):

```
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

Configuration (配置):

```
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 Reference:

```
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/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 and Templates

示例与模板

This skill includes detailed examples organized to match the official documentation structure. All examples are in the

examples/

directory (see mapping above).

To use examples:

Identify the topic from the user's request
Load the appropriate example file from the mapping above
Follow the instructions, syntax, and best practices in that file
Adapt the code examples to your specific use case

To use templates:

Reference templates in
```
templates/
```
directory for common scaffolding
Adapt templates to your specific needs and coding style

本技能包含与官方文档结构匹配的详细示例，所有示例都位于

examples/

目录中（见上述映射）。

使用示例:

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

使用模板:

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

Best Practices

最佳实践

Use watch mode: Leverage Vitest's smart watch mode for faster feedback
Organize tests: Group related tests with describe blocks
Use TypeScript: Take advantage of native TypeScript support
Mock effectively: Use vi.mock() for module mocking
Test components: Use component testing for Vue/React components
Use UI mode: Use
```
--ui
```
flag for better test debugging experience
Optimize performance: Use test.only() during development

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

Resources

资源

Official Documentation: https://vitest.dev/
Getting Started: https://vitest.dev/guide/
API Reference: https://vitest.dev/api/
Configuration: https://vitest.dev/config/
GitHub Repository: https://github.com/vitest-dev/vitest

官方文档：https://vitest.dev/
快速开始：https://vitest.dev/guide/
API参考：https://vitest.dev/api/
配置：https://vitest.dev/config/
GitHub仓库：https://github.com/vitest-dev/vitest

Keywords

关键词

Vitest, vitest, test framework, unit testing, component testing, Vite, Jest compatible, watch mode, HMR, TypeScript, ESM, mocking, snapshots, coverage, browser mode, visual regression testing, 测试框架, 单元测试, 组件测试, 监视模式, 热模块替换, 模拟, 快照, 覆盖率, 浏览器模式, 视觉回归测试