（3445期）Frontend Testing – 全栈测试策略与实战代码生成

全栈测试策略与实战代码生成 专业前端测试指南，覆盖单元/组件/集成/E2E全层级，提供Jest/Vitest/Testing Library/Playwright选型建议与实战用例模板。 使用说明 核心用法 本技能为前端工程团队提供系统化的测试解决方案，覆盖从纯函数单元测试到关键用户路径E2E的完整测试金字塔。采用分层测试策略：单元测试聚焦纯函数与hooks的输入输出验证；组件测试通过React Testing Library/Vue Test Utils模拟真实用户交互；集成测试配合MSW模拟接口验证多模块协作；E2E使用Playwright/Cypress保障关键业务流程。执行流程强调"先诊断再开方"——先明确被测对象类型与现有技术栈，再针对性设计正向、边界、异常、交互四类用例场景，避免盲目追求覆盖率。 显著优点 技术选型务实：明确Vitest优于Jest（ESM原生、更快），但反对已有Jest项目盲目迁移 实战导向：提供安装命令、最小配置、完整代码示例，拒绝纯理论输出 mock边界清晰：只mock系统边界（HTTP/时间/环境变量），不测mock本身 可访问性优先：组件测试强制使用getByRole等语义化选择器，提升代码质量 潜在局限 框架覆盖有限：主要针对React/Vue/Next.js，Svelte/Solid等新兴框架案例不足 未涉及可视化回归测试（Storybook+Chromatic）与性能测试 E2E部分未详述CI/CD集成与并行执行策略 移动端Hybrid/小程序测试场景缺失 适合人群 前端工程师建立团队测试规范 遗留项目补测试债务的技术负责人 纠结Jest/Vitest选型的技术决策者 测试用例设计困难的初级开发者 常规风险 过度mock风险：mock内部函数导致测试失效，技能已明确禁止 选择器脆弱：技能强制语义化选择器，但团队执行不到位仍可能产生 flaky test 异步测试不稳定：虽提供waitFor/findBy*方案，复杂异步流仍需开发者理解事件循环 覆盖率迷信：明确反对100%覆盖率目标，但管理层可能仍将其作为KPI 原始说明 Designs and writes frontend unit, component, integration, and E2E tests using Jest, Vitest, Testing Library, MSW, and Playwright with mocks and coverage cons...