Vitest Testing
Vitest 测试框架模式与最佳实践指南
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：Vitest Testing。 它的用途是：Vitest 测试框架模式与最佳实践指南 完整的 Skill 内容见：https://321skill.com/skills/vitest-testing-x-6/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'用Vitest为这个React组件编写单元测试，并mock API调用'，AI会生成包含渲染测试、用户交互测试和vi.mock模拟axios请求的完整测试文件，同时自动添加vitest.config配置。
对AI说：'审查当前测试用例的覆盖率，并补充边界情况'，AI会分析现有测试，识别缺失的异常分支并生成补充用例。
介绍
本 Skill 解决的是前端/全栈开发中使用 Vitest 进行单元测试、集成测试时的高频痛点：如何编写可维护的测试用例、如何正确配置 vitest.config、如何高效使用 vi.mock 和 vi.fn 进行模块模拟。它提供了一套经过验证的测试模式，帮助开发者避免常见陷阱，提升测试覆盖率和代码质量。
使用方法即在与 AI 对话时引用此 Skill，例如在编写测试文件时，AI 将自动遵循 Vitest 的推荐实践，包括测试结构组织、断言风格、Mock 策略、覆盖率配置等。你还可以要求 AI 根据现有代码生成测试、审查测试用例的完整性，或优化测试性能。
适合所有使用 Vitest 的开发者，特别是前端开发、全栈开发者以及测试工程师。无论你是刚接触 Vitest 的新手，还是希望规范化测试流程的团队，都能从中获得可复用的模式。
建议在实际项目中结合具体场景使用，如对 React/Vue 组件测试、API 接口测试、工具函数测试等。注意本 Skill 聚焦于 Vitest 生态，不覆盖 Cypress 等 E2E 测试框架，也不适用于传统 Jest 配置迁移场景。
核心特点
相比其他通用测试指南，本 Skill 专为 Vitest 设计，深度覆盖 Vite 集成、原生 TypeScript 支持、vi.mock 与 vi.fn 的高级 Mock 模式，以及并行测试、覆盖率插件等特性，避免将 Jest 的过时模式带入 Vitest 项目。
注意事项
不适用于非 Vite 项目（如 Webpack/React 脚手架）或需要浏览器 E2E 测试的场景。
常见问题
如何正确配置 vitest.config？
继承 vite.config 的 defineConfig，在 test 字段中添加 globals、environment、setupFiles 等选项，AI 可自动生成配置模板。
vi.mock 和 vi.fn 有什么区别？
vi.mock 用于模块级模拟，自动替换所有导出；vi.fn 用于创建单个 spy 函数，常配合 vi.spyOn 使用。AI 可帮你选择最合适的 Mock 方式。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/vitest-testing-x-6/raw/index.md 读取 Vitest Testing 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/vitest-testing-x-6/raw/index.md（查看排版版本）