Redux Toolkit Query测试用例未返回预期结果求助

核心问题识别 #

从错误日志和代码对比，能定位两个关键问题：

1. URL拼写不一致：错误信息中请求的URL是/api/getNotificationsList/Data/2/10，但你API定义里的路径是/api/getNotificationList/${name}/${page + 1}/${limit}——两者差了一个s（Notifications vs Notification），导致MSW的mock路由无法匹配，同时触发URL解析失败。
2. 测试环境BaseURL未正确配置：fetchBaseQuery依赖config.BASE_API_URL作为基础地址，如果测试环境中这个变量为空或无效，会导致完整URL拼接失败，抛出Failed to parse URL错误。

分步修复 #

1. 统一URL拼写 #

确保API定义和MSW mock的路径完全一致：

• 确认api.ts中的URL路径拼写（若为笔误则统一修正）：

// api.ts 中保持路径拼写统一
url: `/api/getNotificationList/${name}/${page + 1}/${limit}`,

• 更新MSW的mock路由，匹配正确路径：

const server = setupServer(
  http.get('/api/getNotificationList/Data/2/10', () => {
    return HttpResponse.json({ data: 'mockedData' });
  }),
);

2. 配置测试环境的BaseURL #

• 检查测试环境下config.BASE_API_URL的值，确保它是有效的基础地址（比如http://localhost:3000）
• 若测试无需真实BaseURL，可在测试中临时覆盖baseQuery：

// 在测试文件中临时替换baseQuery
const testApi = notificationApi.injectEndpoints({
  endpoints: () => ({}),
  overrideExisting: false,
});

// 或者在renderHook时传入正确的baseUrl配置
const { result } = renderHookWithProviders(() =>
  useGetNotificationsQuery({ name: 'Data', page: 1, limit: 10 }),
  {
    preloadedState: {},
    // 假设你的render工具支持配置API的baseQuery
    apiConfig: {
      baseQuery: fetchBaseQuery({ baseUrl: 'http://localhost:3000' }),
    },
  },
);

3. 优化测试断言逻辑 #

添加错误状态断言，方便快速定位问题：

await waitFor(() => {
  if (result.current.isError) {
    console.error('请求错误详情:', result.current.error);
    fail('请求失败');
  }
  expect(result.current.isSuccess).toBe(true);
});

额外排查技巧 #

• 启用MSW的passthrough选项，查看实际发送的完整URL：

const server = setupServer({
  // 允许未匹配的请求通过，方便查看真实请求地址
  passthrough: true,
});

• 在测试开始前打印config.BASE_API_URL，确认其值是否正确：

console.log('测试环境BaseURL:', config.BASE_API_URL);

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