前端网络请求异步测试需模拟而非真实请求,推荐MSW拦截fetch/XHR以精准控制响应;须覆盖成功、HTTP错误、网络异常三类状态,并用await+resolves/rejects断言,React中还需act()确保状态更新。

前端网络请求的异步代码测试,核心是不走真实网络、能精准控制响应、覆盖各种状态流转。真实请求慢、不稳定、难断言,还可能触发限流或污染环境,所以必须模拟。
用 msw 或 jest.mock 拦截请求
推荐优先使用 MSW(Mock Service Worker):它在浏览器或 Node 环境中通过 Service Worker 拦截 fetch/XHR,行为最接近真实网络,支持返回指定状态码、延时、多次不同响应等。
单元测试中也可用 jest.mock 替换 axios 或 node-fetch 模块,例如:
- 成功:返回
Promise.resolve({ data: 'ok' }) - HTTP 错误:返回
Promise.reject(new Response('', { status: 404 })) - 网络异常:返回
Promise.reject(new TypeError('Failed to fetch'))
覆盖三类关键状态
一个请求流程至少要验证以下三种分支:
Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。
立即学习“Java免费学习笔记(深入)”;
- 成功响应:检查数据解析是否正确、UI 是否更新(如 loading 关闭、列表渲染)
- HTTP 错误(400/500):确认进入 catch、是否抛出自定义错误、提示文案是否匹配
- 网络异常(断网、超时、fetch 失败):验证 Promise 被 reject、是否有兜底逻辑(如重试按钮显示、离线标识)
async/await 函数必须 await + resolves/rejects
不能只调用函数就结束测试,否则测试会提前通过,异步逻辑实际没执行完。
- 成功:用
await expect(fetchUser()).resolves.toEqual({ id: 1 }) - 失败:用
await expect(fetchUser()).rejects.toThrow('Network Error') - React 组件中还需包裹
act(),确保状态更新同步完成
别漏掉 loading 和副作用
异步过程常伴随状态切换和副作用,测试要验证时机和完整性:
- 发起请求瞬间,
loading应立即变为true - 响应后,
loading变为false,且data或error正确设置 - 埋点、日志、事件监听等副作用函数,需用
mockFn.mock.calls.length断言是否被调用

















