81 lines
2.6 KiB
Markdown
81 lines
2.6 KiB
Markdown
---
|
||
name: vue-testing
|
||
version: 1.0.0
|
||
description: "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 模式速查 |
|