Jest配合MSW测试React组件时fetch响应JSON解析错误如何解决？

问题根源 #

你同时启用了jest-mock-fetch和MSW，两者存在功能冲突：

• jest-mock-fetch会覆盖全局原生fetch实现，默认返回空响应体
• MSW只能拦截原生的fetch/XMLHttpRequest请求，被jest-mock-fetch篡改后的请求无法被MSW捕获处理，因此你拿到的是空body的200响应，解析JSON时自然抛出"Unexpected end of JSON input"错误

解决方法 #

• 优先移除jest-mock-fetch依赖，MSW本身就已经实现了接口拦截的能力，不需要额外的fetch mock工具配合使用，移除后即可正常捕获请求返回你配置的JSON数据
• 检查MSW的测试生命周期配置是否完整，确保你在测试框架的生命周期钩子中添加了以下配置：

// 测试启动前开启MSW服务
beforeAll(() => server.listen())
// 单条测试结束后重置拦截规则
afterEach(() => server.resetHandlers())
// 所有测试结束后关闭MSW服务
afterAll(() => server.close())

• 不要用act包裹组件渲染逻辑，React Testing Library的render方法已经内置了act处理。对于异步接口返回后的状态断言，使用waitFor或者findBy前缀的查询方法等待异步状态更新即可，示例：

test('校验用户投票状态', async () => {
  render(<VoteButton />)
  // 等待接口返回后状态更新
  expect(await screen.findByText('你已参与投票')).toBeInTheDocument()
})

• 如果你需要保留jest-mock-fetch用于其他测试场景，可在当前测试文件顶部恢复原生fetch实现：

global.fetch = jest.requireActual('node-fetch')

内容的提问来源于stack exchange，提问作者Andy