为开发团队提供测试基础设施设计与实施指导，涵盖快照测试、模拟…

# React电商后台测试方案（Jest + MSW + 冒烟测试）

一、快照测试策略（80个组件）

分层快照，避免快照爆炸

• 展示型组件（按钮、卡片、表格单元格、徽章）：全面做 toMatchSnapshot()，每个组件1-2个快照覆盖默认态和关键props变体。
• 容器/页面组件（订单列表、商品编辑页等）：慎用整体快照，改为关键DOM片段快照（container.querySelector('.order-table').toMatchSnapshot()）或配合 Testing Library 断言，避免一个弹窗改动导致全页快照失败。
• 动态内容处理：时间戳、随机ID、价格计算结果先 mock 固定（如 jest.mock('dayjs') 或注入固定date props），否则快照天天失败。

快照维护规范

• 快照文件与组件同目录（__snapshots__/），进版本控制。
• CI 中加 --ci 标志，新快照必须人工 jest -u 确认后提交，禁止CI自动写入。
• 交互测试为主、快照为辅：按钮点击、表单校验用 Testing Library 行为断言，快照只验证渲染结构。

二、MSW 模拟服务器方案

架构

• 建目录 mocks/：handlers.js（统一请求处理）、handlers/admin-orders.js 等按业务模块拆分（订单、商品、库存、用户、营销）。
• setupServer() 在 jest.setup.js 中全局启动：beforeAll(() => server.listen())，每个用例 afterEach(() => server.resetHandlers())，afterAll(() => server.close())。

数据工厂

• 用 @faker-js/faker 或手写工厂函数生成商品/订单测试数据，保证字段结构真实一致。
• 高频场景封装成函数：如 mockOrderListSuccess()、mockCreateOrderError()，用例内 server.use(...) 覆盖，测试失败态、空态、分页、权限403等分支。

覆盖点

• 拦截所有 /api/* 请求，含文件上传（multipart 可简单返回成功响应）。
• 对含鉴权的接口在 handler 里校验 localStorage token，模拟登录态。

三、部署后冒烟测试流程

流程设计

1. 触发方式：CI 部署成功后自动触发（Jenkins/GitHub Actions 的 post-deploy 阶段），或用定时任务对生产环境巡检。

2. 核心链路脚本：用 Playwright（比纯Jest更适合E2E）跑5-8条关键路径，约2-5分钟内完成：

• 登录后台 → 首页加载无JS报错
• 订单列表查询、翻页
• 商品搜索、进入详情
• 修改一个低风险配置并保存（或只做只读操作，避免污染生产数据）

3. 健康检查前置：先请求 /health 或首页状态码，通过后才跑UI链路。

4. 失败处理：截图+视频留档，自动发告警到企业微信/钉钉群，标记构建状态。

落地建议

• 冒烟测试账号使用专用低权限账号，环境变量管理凭据。
• 冒烟用例与单测分离目录，单独命令 npm run smoke。