React-Testing Library与MSW v2测试RTKQ时renderHook无数据返回

可能的原因及排查步骤 #

1. 检查Redux Store是否正确配置RTKQ #

RTKQ需要将其reducer添加到store中，并启用对应的middleware，否则无法正确缓存和返回响应数据。确认你的store配置包含以下核心内容：

import { configureStore } from '@reduxjs/toolkit';
import { adminApi } from './path-to-adminApi';

export const store = configureStore({
  reducer: {
    // 必须注册RTKQ的reducer
    [adminApi.reducerPath]: adminApi.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    // 必须添加RTKQ的middleware以处理请求生命周期
    getDefaultMiddleware().concat(adminApi.middleware),
});

如果缺少这部分配置，RTKQ无法正确处理响应数据，可能出现isSuccess: true但data未定义的异常。

2. 验证MSW请求路径是否与实际请求匹配 #

虽然你的MSW handler路径看起来正确，但实际请求的URL可能因BASE_URL拼接细节（如斜杠、域名后缀）不匹配。可以通过以下方式确认：

• 在MSW handler中添加日志，确认是否被触发：

  http.get(`${BASE_URL}/admin/test`, () => {
    console.log('MSW test handler triggered'); // 检查控制台是否打印此信息
    return HttpResponse.json({ data: 'Hello World' });
  }),
  

• 在测试中监听fetch，查看实际请求的完整URL：

  // 测试文件顶部
  global.fetch = jest.spyOn(global, 'fetch').mockImplementation(global.fetch);
  
  // 测试用例中
  await waitFor(() => expect(result.current.isSuccess).toBe(true));
  console.log('实际请求URL:', global.fetch.mock.calls[0][0]);
  

对比实际请求URL与MSW handler的路径，确保完全一致（注意斜杠、端口、环境变量取值等细节）。

3. 调整测试中的断言时机 #

虽然isSuccess变为true理论上意味着data已就绪，但可以直接等待data被定义，避免状态更新的时序问题：

test('renders hook', async () => {
    const { result } = renderHook(() => useTestQuery(), {
        wrapper,
    });

    // 直接等待data被定义，替代先判断isSuccess的逻辑
    await waitFor(() => expect(result.current.data).toBeDefined());

    console.log('数据已获取:', result.current.data);
    expect(result.current.data.data).toBe('Hello World');
});

4. 确认RTKQ endpoint的method配置 #

检查httpMethod.Get的值是否为'GET'（大写），虽然HTTP方法通常不区分大小写，但确保与MSW的http.get匹配（MSW的http.get仅匹配GET方法的请求）。如果httpMethod.Get是小写的'get'，可以改为大写，或者直接写method: 'GET'。

5. 检查MSW响应的正确性 #

确保MSW返回的响应是有效的200状态码（默认是200），并且JSON结构与Test接口完全匹配。可以显式指定状态码以排除异常：

return HttpResponse.json({ data: 'Hello World' }, { status: 200 });

总结 #

最常见的问题是Store未正确配置RTKQ的reducer和middleware，或者MSW请求路径与实际请求不匹配。按照上述步骤逐一排查，应该能解决isSuccess: true但data未定义的问题。

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