前端单元测试与E2E测试：Jest、Cypress与Playwright实战

## 前端测试金字塔与策略 测试金字塔三层：单元测试数量最多粒度最细速度最快、集成测试模块间交互、E2E测试数量最少覆盖完整用户流程。Vitest/Jest是单元测试主流：Jest开箱即用提供断言Mock覆盖率报告社区丰富，Vitest与Vite兼容测试启动极快。Cypress运行在浏览器内调试优秀API直观，Playwright通过CDP控制浏览器支持跨浏览器内置自动等待和并行执行。覆盖率用Istanbul/nyc收集行列函数语句覆盖率，核心业务逻辑目标80%以上。测试金字塔原则是大量低成本单元测试打底，少量E2E测试覆盖关键路径。 ## 单元测试编写实战 遵循AAA模式（Arrange准备-Act执行-Assert断言）。Jest Mock强大：jest.fn创建Mock函数，jest.spyOn监听方法，jest.mock自动Mock模块。React Testing Library推荐模拟用户交互非直接操作DOM，render渲染组件screen查询fireEvent模拟事件。waitFor和findBy处理异步更新。自定义Hook测试用renderHook和act。MSW在Service Worker层拦截网络请求统一Mock无论前端用fetch还是axios，测试代码无侵入。集成测试关注模块协作：API调用与数据处理、Store与组件数据流、路由切换后渲染。 ## E2E测试框架与企业级策略 Page Object Model在E2E中尤为重要——封装页面元素定位和操作测试用例调高层方法，UI变化只改页面对象。Playwright fixture定义共享上下文如登录状态和测试数据。并行workers控制并行度：CPU密集测worker数等于核心一半，I/O密集可增加。数据驱动测试参数化覆盖多种数据场景。CI/CD中E2E在单元测试后执行：PR级跑关键路径全量在主分支合并后。Playwright HTML报告含截图视频配Allure展示趋势分析。失败重试机制和测试隔离是CI稳定性的保障。