用途:为 Next.js 项目编写单元测试与端到端测试,覆盖组件交互、API 模拟和关键用户流程。
测试运行器:已有项目(Pages Router / 旧技术栈)使用 Jest(jest@29 + babel-jest + jest-environment-jsdom)。新项目(App Router)使用 Vitest,以获得更快的速度和原生 ESM 支持。
主要能力与用法:单元测试使用 Jest(旧项目)或 Vitest(新项目)配合 React Testing Library(RTL),遵循 Arrange-Act-Assert 模式。API 模拟使用 Mock Service Worker(MSW)处理所有 fetch 边界,确保服务端与浏览器端 handler 都正确配置。交互测试使用 userEvent(异步),如 await user.click(button),用于点击、输入、表单提交。选择器优先使用 getByRole / findByRole 以验证可访问性,data-testid 仅作兜底。E2E 测试使用 Playwright 验证完整用户流程,聚焦登录、结账等关键路径。环境上,Jest 使用 jest-environment-jsdom;Vitest 在 vitest.config.ts 中配置 jsdom 或 happy-dom。报告方面,测试应生成 JSON 覆盖率报告供 CI 门禁使用,核心库目标覆盖率达 80% 以上。
限制与反模式:测试中不使用真实网络,始终用 MSW handler 或 mock;不测试实现细节,只测试用户行为;不用重型 E2E 测单元逻辑;每个测试后用重置 MSW handler 与 mock,避免全局状态泄漏。