66 lines
1.9 KiB
Plaintext
66 lines
1.9 KiB
Plaintext
---
|
||
description: >
|
||
Vue 3 + Vitest 前端测试技能。新建或更新测试文件、
|
||
编写单元/组件/E2E 测试时激活。
|
||
globs:
|
||
- "**/*.test.*"
|
||
- "**/__tests__/**"
|
||
alwaysApply: false
|
||
---
|
||
|
||
# Vue Testing
|
||
|
||
> 本文件是精简执行摘要。完整流程、模板和深度参考见：
|
||
> Read `.cursor/skills/vue-testing/SKILL.md`
|
||
|
||
> **适用性**：本技能用于**新建或更新测试文件**。
|
||
> 非测试相关的代码修改可忽略本技能。
|
||
|
||
## 测试决策树（每次写测试前必须先走）
|
||
|
||
```
|
||
纯转换逻辑（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 <条件>`
|
||
|
||
## 增量式工作流
|
||
|
||
工具函数 → Composables → 简单组件 → 复杂组件 → 集成。
|
||
逐个文件：写测试 → vitest run → PASS 才下一个。
|
||
|
||
## 覆盖率目标
|
||
|
||
Function 100% | Statement 100% | Branch > 95% | Line > 95%
|
||
|
||
## 验证
|
||
|
||
- [ ] 走过决策树
|
||
- [ ] 逻辑已提取到 .utils.ts
|
||
- [ ] 穷举排列覆盖
|
||
- [ ] 命名 should...when...
|
||
- [ ] vitest run 全部通过
|
||
- [ ] 覆盖率达标
|
||
|
||
## 深度参考
|
||
|
||
- `.cursor/skills/vue-testing/references/testing-templates.md`
|
||
- `.cursor/skills/vue-testing/references/mock-patterns.md`
|