Provides comprehensive guidance for Vitest testing framework including fast test execution, Vite integration, component testing, mocking, and configuration. Use when the user asks about Vitest, needs to write fast unit tests, test Vue/React components, or configure Vitest with Vite projects.
Use this skill whenever the user wants to:
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:
examples/getting-started.mdexamples/features.mdexamples/component-testing.mdexamples/browser-mode.mdapi/examples/config/Load the appropriate example file from the examples/ directory:
Getting Started (快速开始):
examples/getting-started.md - Installation and first testFeatures (功能特性):
examples/features.md - Key features and capabilitiesexamples/ui.md - Vitest UIexamples/component-testing.md - Component testingexamples/browser-mode.md - Browser mode testingexamples/visual-regression-testing.md - Visual regression testingexamples/trace-view.md - Trace viewTesting (测试):
examples/test-api.md - Test API (test, it, describe, etc.)examples/mocking.md - Mocking functions and modulesexamples/snapshots.md - Snapshot testingexamples/coverage.md - Code coverageConfiguration (配置):
examples/config/basic-config.md - Basic configurationexamples/config/environment.md - Environment configurationexamples/config/browser-config.md - Browser mode configurationFollow the specific instructions in that example file for syntax, structure, and best practices
Important Notes:
Reference API documentation in the api/ directory when needed:
api/test-api.md - Test API referenceapi/vi-utility.md - vi utility functionsapi/expect.md - Expect assertionsapi/mocking.md - Mocking APIUse templates from the templates/ directory:
templates/vitest-config.md - Vitest configuration templatestemplates/test-examples.md - Test example templatesGuide (指南):
examples/getting-started.md → https://vitest.dev/guide/getting-started.htmlexamples/features.md → https://vitest.dev/guide/features.htmlexamples/ui.md → https://vitest.dev/guide/ui.htmlexamples/component-testing.md → https://vitest.dev/guide/testing-components.htmlexamples/browser-mode.md → https://vitest.dev/guide/browser.htmlexamples/visual-regression-testing.md → https://vitest.dev/guide/visual-regression.htmlexamples/trace-view.md → https://vitest.dev/guide/trace-view.htmlexamples/mocking.md → https://vitest.dev/guide/mocking.htmlexamples/snapshots.md → https://vitest.dev/guide/snapshot.htmlexamples/coverage.md → https://vitest.dev/guide/coverage.htmlConfiguration (配置):
examples/config/basic-config.md → https://vitest.dev/config/examples/config/environment.md → https://vitest.dev/config/#environmentexamples/config/browser-config.md → https://vitest.dev/config/#browserAPI Reference:
api/test-api.md → https://vitest.dev/api/api/vi-utility.md → https://vitest.dev/api/vi.htmlapi/expect.md → https://vitest.dev/api/expect.htmlapi/mocking.md → https://vitest.dev/api/vi.htmlThis skill includes detailed examples organized to match the official documentation structure. All examples are in the examples/ directory (see mapping above).
To use examples:
To use templates:
templates/ directory for common scaffolding--ui flag for better test debugging experienceVitest, vitest, test framework, unit testing, component testing, Vite, Jest compatible, watch mode, HMR, TypeScript, ESM, mocking, snapshots, coverage, browser mode, visual regression testing, 测试框架, 单元测试, 组件测试, 监视模式, 热模块替换, 模拟, 快照, 覆盖率, 浏览器模式, 视觉回归测试
确保开发环境已安装必要的依赖和工具。
根据项目需求进行基础配置。
按照示例代码实现核心功能。
运行测试确保功能正常。
完成开发后进行部署和监控。