MSW.js 中模拟数据返回空字符串问题的分析与解决

问题现象

在使用MSW.js进行API模拟时，开发者可能会遇到一个奇怪的问题：明明设置了正确的响应数据，但在实际请求中却只能获取到空字符串。具体表现为：

• 响应状态码为200，状态文本显示"OK"
• 响应头中包含正确的"application/json"内容类型
• 响应体中的data字段却为空字符串""
• 而开发者期望返回的是类似{user: {id: 'abc-123', name: 'John Maverick'}}这样的JSON数据

问题根源

经过分析，这个问题通常由以下几个原因导致：

1. Response对象使用不当：直接使用new Response()构造函数时，如果未正确序列化响应体，会导致数据无法正确传递。

2. polyfill冲突：在React或React Native项目中，如果使用了whatwg-fetch等polyfill，可能会与MSW.js的响应处理机制产生冲突。

3. 版本兼容性问题：某些MSW.js的版本可能存在与特定测试框架或HTTP客户端(如axios)的兼容性问题。

解决方案

正确使用Response对象

当直接使用Response构造函数时，必须确保响应体是字符串化的JSON：

// 错误用法 - 会导致空字符串问题
return new Response({test: true}, {
  status: 200,
  headers: {'Content-Type': 'application/json'}
});

// 正确用法 - 需要先JSON.stringify
return new Response(JSON.stringify({test: true}), {
  status: 200,
  headers: {'Content-Type': 'application/json'}
});

使用MSW提供的工具方法

更推荐使用MSW提供的HttpResponse.json()方法，它会自动处理JSON序列化：

import { HttpResponse } from 'msw';

return HttpResponse.json({test: true}, {
  status: 200,
  headers: {'Last-Modified': 'Mon, 13 Jul 2020 15:00:00 GMT'}
});

处理polyfill冲突

如果项目中使用了whatwg-fetch等polyfill，可以尝试以下方法：

1. 检查polyfill的加载顺序，确保MSW.js在polyfill之后初始化
2. 考虑降级到MSW v1版本（部分开发者反馈v1版本无此问题）
3. 在测试环境中移除不必要的polyfill

版本选择建议

对于React Native或复杂项目，可以考虑：

• 使用MSW稳定版本而非最新版
• 仔细检查版本间的变更日志，特别是与响应处理相关的部分

最佳实践

1. 始终优先使用HttpResponse.json()而非原生Response构造函数
2. 在复杂项目中，逐步测试MSW的集成，确保没有polyfill冲突
3. 保持MSW和相关依赖(axios等HTTP客户端)的版本兼容性
4. 在遇到问题时，尝试创建最小化复现环境，便于定位问题

通过遵循这些实践，可以避免大多数与模拟数据返回空字符串相关的问题，确保测试环境的稳定性和可靠性。