Vitest Testing
Vitest单元测试与集成测试最佳实践
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：Vitest Testing。 它的用途是：Vitest单元测试与集成测试最佳实践 完整的 Skill 内容见：https://321skill.com/skills/vitest-testing-x-4/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“请为我编写一个Vitest单元测试，测试一个React组件的渲染和交互，并使用vi.fn()模拟点击事件回调。” 它会生成一个完整的测试文件，包含describe/it块、vi.mock、vi.fn定义以及断言，并附带如何配置vitest.config以支持React和TypeScript的说明。
介绍
Vitest Testing 技能旨在解决使用 Vitest 测试框架时常见的模式与最佳实践问题。无论是编写单元测试、集成测试，还是配置 vitest.config、使用 vi.mock/vi.fn 进行 Mock，开发者常常面临 API 不熟悉、配置繁琐、断言不准确等问题。本技能提供了一套清晰、可复用的测试模板和技巧，帮助快速上手并写出高质量、可维护的测试代码。
使用方式非常简单：在需要编写测试时，直接向 AI 描述你的需求，例如“为这个 React 组件写一个单元测试，用 vi.fn 模拟点击事件”或“配置 vitest.config 支持 path alias”。AI 会依据本技能中的最佳实践生成完整的测试文件、配置片段或 Mock 示例，并附带解释，确保你理解每一步的意图。
本技能主要适合前端开发、全栈开发和测试工程师，尤其适合使用 Vite 作为构建工具的项目团队。对于正在从 Jest 迁移到 Vitest 的开发者，本技能也能提供迁移指南和 API 差异对照。无论你是刚接触 Vitest 的新手，还是希望优化测试效率的资深工程师，都能从中获益。
使用建议：在编写测试前，先明确测试目标（单元测试 vs 集成测试），并利用本技能中的 Mock 策略隔离外部依赖。注意 Vitest 与 Vite 的版本兼容性，建议在配置文件中定义全局 setup 文件以统一 Mock 行为。同时，善用 vi.spyOn 和 vi.fn 进行函数级 Mock，避免过度 Mock 导致测试失真。
核心特点
与通用测试助手不同，本技能深度聚焦 Vitest 框架，提供从配置、Mock 到断言的完整模式，并针对 Vite 生态做了优化，如自动处理路径别名、CSS 模块等，而不会混入 Jest 或 Mocha 的冗余内容。
注意事项
不适用于非 Vite 项目（如纯 Node.js 或 Webpack 项目）以及需要 Jest 专属 API 的迁移场景。
常见问题
如何用 vi.mock 模拟一个第三方模块？
在测试文件顶部使用 `vi.mock('模块名', () => ({ default: mockFn }))`，并在 setupFiles 中配置全局 mock 路径。
Vitest 与 Jest 的配置有何区别？
Vitest 配置文件为 vitest.config.ts，使用 defineConfig 定义，兼容 Vite 配置，而 Jest 使用 jest.config.js。Vitest 原生支持 ESM 和 TypeScript，无需额外转换。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/vitest-testing-x-4/raw/index.md 读取 Vitest Testing 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/vitest-testing-x-4/raw/index.md（查看排版版本）