前端测试（Frontend Testing）技能用于在实现前端测试时提供系统化指导，参考来源包括 Kent C. Dodds《Testing Trophy》、Testing Library 官方、Playwright / Cypress 官方、Storybook 测试文档与 deque axe-core。
一、适用场景 覆盖单元测试（工具函数、Hook、Composable）、组件测试（行为与可访问性）、集成测试（页面与 Mock API）、E2E 测试（关键用户旅程）、视觉回归测试以及可访问性自动化测试。
二、核心原则
- Testing Trophy（Kent C. Dodds 模型）：静态（TS + ESLint）为基础，单元针对工具函数 / Hook，集成（最有价值）针对组件与页面，E2E 针对关键流程。
- 测行为不测实现：从用户视角出发，关注能看到、能点、能输入的部分；不测 state 内部值与私有方法。
- Testing Library 哲学：使用 getByRole / getByLabelText 等用户找元素的方式，不用 getByTestId（除非别无选择）。
- Mock 越少越好：Mock 网络请求（MSW）、时间、随机；不 Mock 内部组件与业务逻辑。
- 测试金字塔：单元 70%（多）、集成 25%、E2E 5%（少）。
- CI 集成：单元 / 集成必跑，E2E 关键路径，Lighthouse Accessibility。
三、测试工具速查 单元 / 集成：Vitest（推荐）/ Jest，适合业务逻辑；组件渲染：React Testing Library / Vue Test Utils，适合行为测试；API Mock：MSW（推荐），针对网络层；E2E：Playwright（推荐）/ Cypress，针对关键流程；视觉回归：Chromatic / Percy / Playwright screenshots，针对 UI 一致；可访问性：jest-axe / @axe-core/playwright，针对 a11y；Storybook：组件展示与测试；性能：Lighthouse CI，针对 Web Vitals。
四、使用方式与示例 技能提供 Vitest 配置（vitest.config.ts、setup.ts）、React Testing Library 实战（组件行为测试、表单测试、Hook 测试）、MSW（API Mock，含 handlers、node server、单测覆盖 handler）、Vue Test Utils、Playwright（E2E 配置、登录流程、截图对比、Page Object Model）、Cypress、Storybook（组件文档与交互测试）、视觉回归（Chromatic 的 GitHub Actions 配置）、可访问性测试（jest-axe / vitest-axe、Playwright + axe）、测试数据工厂（faker + fishery）、CI 集成（GitHub Actions 的 unit / e2e / lighthouse 任务）等完整代码示例。
五、测试金字塔分布 对一个中等项目（5 万行代码）：单元测试（70%）覆盖工具函数 / Hook / Composable 与业务逻辑（pure function），数量 500~2000 个，时长 < 30s；集成测试（25%）覆盖组件 + Mock API 与表单提交流程，数量 100~300 个，时长 < 5min；E2E 测试（5%）覆盖关键用户旅程（5~15 条），如登录 / 下单 / 支付 / 注销，时长 < 10min。
六、工作流程
- 选工具栈：Vitest + RTL + MSW + Playwright。2. 配置 CI：单元 + 集成必跑，E2E 关键路径，失败阻塞合并。3. 写测试（TDD 或之后）：工具函数 → 单元，组件 → 组件测试 + Storybook，页面 → 集成，关键流程 → E2E。4. Mock 层（MSW）：不依赖真后端。5. 测试数据（factories）。6. 视觉回归（Storybook + Chromatic）。7. 可访问性（axe-core）。8. 持续维护：失败用例修，Flaky 隔离。
七、配套模板与质量自检 配套模板为 templates/test-strategy-template.md，包含测试金字塔 + 工具选型 + Mock + CI。质量自检清单包括：测试金字塔分布合理、单元覆盖业务逻辑 ≥ 80%、集成覆盖主路径、E2E 关键 5~15 条、用 Testing Library 哲学（角色 / 标签）、MSW Mock API、Storybook 覆盖组件、视觉回归（关键 UI）、a11y 自动测试、CI 集成（PR 阻塞）、Page Object Model（E2E）、测试数据用工厂、不测实现细节、失败信息清晰。
八、常见坑 测实现细节导致重构挂大量；getByTestId 滥用（应该用 role / label）；过度 Mock（Mock 自己代码）；不测可访问性（后期返工大）；E2E 太多（慢且脆弱）；没 Page Object（E2E 重复代码）；不用 MSW（每个测试自己写 Mock）；测试不独立（共享状态）；flaky 测试不修（干扰真问题）；测试不快（5min 跑完没人跑）；不用 factory（测试数据散乱）；CI 不阻塞合并（形同虚设）；不视觉回归（UI 改坏不知道）；不 sleep 用 waitFor（异步处理）。
九、与其他 skill 的协作 上游：api-designer → API 契约 → MSW handler；component-architecture → 组件 + Storybook。下游：qa-engineer 工作流 → QA 用例；automation-qa 工作流 → CI 自动化；build-deploy → 构建产物测试。相关参考：项目根 references/frontend-tech-stack-guide.md（测试工具）、backend-engineer testing-implementation skill。