vibe_coding/.cursor/skills/vue-testing/SKILL.md

name, version, description

name	version	description
vue-testing	1.0.0	Vue 3 + Vitest 前端测试策略与工作流。当需要编写单元测试、组件测试或 E2E 测试时使用。涵盖测试决策树和覆盖率标准。

⚠️ 核心执行流程已在 .cursor/rules/skill-vue-testing.mdc 中由 Cursor 自动注入。 本文件提供完整模板、代码示例和边缘场景处理，供 Agent 按需深入 Read。

Vue 3 + Vitest 前端测试

触发条件

用户要求编写测试、改善测试覆盖率、或询问测试策略。

测试决策树（⚠️ 每次写测试前必须先走）

纯转换逻辑（parse/format/validate/compute）？→ 提取到 .utils.ts，写 Vitest 单元测试
涉及复杂 UI 交互？→ Vue Test Utils 组件测试
能提取为纯函数或 composable？→ 提取后写单元测试
否则 → 组件测试
跨页面流程、关键业务路径？→ Playwright E2E

测试类型与工具

类型	工具	文件命名
单元测试	Vitest	*.test.ts
组件测试	Vitest + Vue Test Utils	*.test.ts
E2E	Playwright	*.spec.ts

核心原则

1. 逻辑提取 — 业务逻辑提取到 .utils.ts 纯函数，组件薄壳
2. 穷举排列 — 有效/无效/空值/边界/安全输入
3. AAA 模式 — Arrange-Act-Assert
4. 单一行为 — 每个 it() 只验证一个行为
5. 命名 — should <行为> when <条件>

组件测试结构

Rendering（必须）、Props（必须）、User Interactions、Edge Cases（必须）。完整模板见 Tier 3。

增量式工作流（必须）

工具函数 → Composables → 简单组件 → 中等 → 复杂 → 集成。逐个文件：写测试→vitest run→PASS 才下一个。

复杂度阈值

< 30 标准结构。30–50 按 describe 分组。> 50 先重构再测试。500+ 行强制考虑拆分。

Mock 策略

API/Router Mock。Pinia 用真实 Store。管理端 Element Plus 不 Mock；用户端不涉及 Element Plus（使用 Headless UI）。子组件不 Mock。完整策略见 Tier 3。

覆盖率目标

Function 100%、Statement 100%、Branch > 95%、Line > 95%。

验证

1. 走过决策树
2. 逻辑已提取到 .utils.ts
3. 穷举排列覆盖
4. 每测试单行为
5. 命名 should...when...
6. Mock 正确
7. 增量式工作流
8. 覆盖率达标
9. vitest run 全部通过

Tier 3 深度参考

文件	内容
references/testing-templates.md	组件/Composable 测试模板、Mock 策略、增量工作流
references/vitest-config.md	Vitest + Vue 3 配置
references/mock-patterns.md	Mock 模式速查