Storybook MSW Addon模拟PUT请求时react-query状态异常

一、React Query Mutation 状态始终 idle、回调不触发的修复 #

1. 修正 MutationFn 逻辑 #

你的 mutationFn 当前仅返回 API 实例，并未实际触发异步请求。React Query 需要接收异步请求的 Promise 才能跟踪状态变化，需修改为调用具体的接口方法：

useMutation({
  mutationFn: (isEnabled: boolean) => {
    // 实例化后调用对应的请求方法，返回异步请求的 Promise
    const apiInstance = Api();
    return apiInstance.mfaEnablement(isEnabled);
  }
})

2. 修复 MSW 语法错误 #

你的 MSW PUT 请求代码存在字符串闭合错误，修正 URL 引号：

http.put('myUrl', async ({request}) => {
  await delay('real');
  return HttpResponse.json({myJson});
})

3. 确保异步请求链路完整 #

检查 axiosApi 方法是否正确发起 PUT 请求并返回 Promise，示例如下（确保匹配 MSW 拦截的 URL、请求方法）：

axiosApi = async (tenantId: string, userId: string, body: { isEnabled: boolean }) => {
  return this.axios.put(`/your/actual/myUrl`, body, {
    params: { tenantId, userId }
  });
}

二、MSW 中获取 PUT 请求体并动态返回响应 #

通过 request.json() 解析请求体，即可根据传入参数动态生成响应：

http.put('myUrl', async ({request}) => {
  // 解析请求体
  const requestBody = await request.json();
  await delay('real');
  // 根据请求体内容动态返回响应
  return HttpResponse.json({ 
    isEnabled: requestBody.isEnabled,
    message: `MFA ${requestBody.isEnabled ? 'enabled' : 'disabled'} successfully`
  });
})

三、额外验证点 #

• 确认 MSW 拦截的 URL 与实际请求的 URL 完全匹配（包括路径、查询参数）
• 检查浏览器开发者工具的 Network 面板，确认请求被 MSW 标记为 Mocked，且响应状态码为 2xx
• 确保 React Query 的 QueryClient 已正确配置并在 Storybook 中全局提供

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