前端测试技能评估
核心用法
该技能专注于前端测试全流程支持，涵盖四大测试层级：单元测试（纯函数/hooks）、组件测试（React/Vue组件交互）、集成测试（多模块/接口协作）和 E2E 测试（关键用户路径）。技能内置清晰的选型指南，推荐 Vitest + React Testing Library + MSW + Playwright 的现代技术栈组合。
核心执行流程分为三步：首先通过诊断式提问明确被测对象和现有框架；其次按"识别类型→列用例→给代码"的递进方式交付；最后针对无框架、元素定位、异步不稳定、mock 边界等高频痛点给出具体解决方案。特别强调了测试哲学的实践：优先语义化选择器（getByRole）、避免过度 mock、覆盖率是工具而非目标。
显著优点
1. 场景覆盖完整：从纯函数到完整用户路径，提供分层测试策略
2. 决策导向明确：技术选型给出直接建议（如"新项目用 Vitest，已有 Jest 不要为了换而换"）
3. 实战细节丰富：包含具体代码示例、错误处理模式、async/await 最佳实践
4. 反模式警示：明确反对 snapshot 滥用、CSS 类名依赖、内部函数 mock 等常见错误
5. 框架适配广泛：原生支持 React、Vue、Next.js 等主流前端框架
潜在局限
1. 未覆盖性能测试：未提及 Lighthouse CI、Web Vitals 等性能基准测试
2. 视觉回归缺失：未涉及 Chromatic、Percy 等 UI 视觉回归测试方案
3. 移动端专项不足：未针对 React Native、Flutter 等跨端测试提供指导
4. CI/CD 集成简略：未详细说明测试在流水线中的并行化、缓存、失败重试策略
适合人群
- 前端开发者（初中高级）建立或重构项目测试体系
- 技术负责人制定团队测试规范与选型决策
- 遗留项目维护者逐步补全测试覆盖
- 对测试理论熟悉但缺乏具体落地经验的开发者
常规风险
- 测试维护成本：过度追求覆盖率导致测试代码膨胀，反而拖慢迭代速度
- mock 失真风险：MSW 配置不当或 mock 数据与真实 API 脱节，导致"测试通过但线上故障"
- 选择器脆弱性：未遵循 role/text/testid 优先级，导致 UI 微调后测试大面积失败
- 异步竞态条件：cleanup 不彻底或 waitFor 使用不当造成 flaky tests（不稳定测试）
- 环境差异：本地通过但 CI 失败（如时区、浏览器版本、内存限制）