MSW 在 React Native 中与 Axios 集成问题的分析与解决方案

问题背景

在 React Native 开发环境中，开发者经常使用 MSW（Mock Service Worker）来进行 API 的模拟测试。然而，当与 Axios 结合使用时，会出现请求返回空数据的问题，而使用 fetch 则能正常工作。这个问题困扰了许多开发者，特别是在 React Native 0.73.x 版本中尤为明显。

问题现象

开发者报告的主要症状包括：

• 使用 Axios 发起请求时，返回的数据为空字符串
• 相同的请求使用 fetch 却能正常获取模拟数据
• MSW 的拦截器确实被触发（控制台日志可见）
• 请求真实 API 时 Axios 工作正常
• 错误信息中常出现"DOMParser is not defined"警告

技术分析

根本原因

经过深入分析，问题的根源在于 React Native 环境与浏览器环境的差异：

1. Response 对象差异：React Native 中的 Response 对象没有标准的 .body 属性，而是使用 ._bodyInit 和 ._bodyText 来存储响应体

2. 流处理机制：React Native 目前不完全支持 ReadableStream API，而 MSW 的拦截器默认依赖这个特性来处理响应体

3. XMLHttpRequest 实现：React Native 的 XMLHttpRequest 实现与浏览器标准有差异，导致 MSW 的拦截逻辑无法正确解析响应

具体表现

在调试日志中可以观察到：

• 请求确实被 MSW 拦截并处理
• 响应状态码正确（如200）
• 响应头正确设置
• 但响应体在传输过程中丢失或被置空
• 最终 Axios 接收到的数据为空

解决方案

临时解决方案

开发者 @XantreDev 提出了一个有效的临时解决方案，通过修改 @mswjs/interceptors 包的代码：

// 在 XMLHttpRequestController 类中添加以下逻辑
if (response._bodyInit) {
  const bodyInit = response._bodyInit;
  const encoder = new TextEncoder();
  this.responseBuffer = encoder.encode(bodyInit);
  finalizeResponse();
}

这个修改使得拦截器能够识别 React Native 特有的 _bodyInit 属性，并将其转换为可用的响应数据。

推荐解决方案

对于长期解决方案，建议采取以下步骤：

1. 环境检测：在 MSW 中增加对 React Native 环境的检测逻辑

2. 适配层：为 React Native 实现专门的响应体处理逻辑，兼容其特有的 Response 对象结构

3. 配置选项：提供配置项让开发者明确指定运行环境

4. 文档更新：在官方文档中明确说明 React Native 环境下的特殊配置要求

最佳实践

对于正在使用 React Native 和 MSW 的开发者，建议：

1. 如果使用 Axios 是必须的，可以暂时应用上述补丁
2. 考虑在测试环境中统一使用 fetch 替代 Axios
3. 关注 MSW 官方更新，等待官方支持 React Native 的完善方案
4. 在项目中添加环境检测逻辑，针对不同环境采用不同的 mock 策略

未来展望

随着 React Native 生态的发展，特别是对现代 Web API 支持的不断完善，这个问题有望得到根本解决。开发者可以期待：

1. React Native 对 ReadableStream 等现代 API 的完整支持
2. MSW 官方对 React Native 环境的原生适配
3. 更统一的跨环境 mock 解决方案的出现

通过社区和官方的共同努力，React Native 中的 API mock 体验将会越来越接近浏览器环境，为开发者提供更流畅的开发体验。