使用React Query与RTL的renderHook时result始终为null的问题求助

看起来你遇到了React Query和Testing Library renderHook 配合时的典型问题——明明API请求在getInfo里能打印出数据，但renderHook的result就是拿不到有效数据，显示{ result : null }。咱们一步步来排查和解决：

1. 首先，检查你访问renderHook结果的方式 #

你可能忽略了一个关键细节：renderHook返回的result对象，其实际的Hook返回值是存在于result.current属性中，而不是直接访问result本身。

你之前的代码里写了：

console.log(result); // 这打印的是renderHook的包装对象，不是Hook的返回值

正确的做法应该是打印result.current——这才是useInfo Hook返回的useQuery结果对象（包含data、isLoading、isSuccess等状态）：

console.log(result.current); // 现在能看到useQuery的完整状态，比如isLoading、data等

2. 等待React Query的异步状态完成，而不是只等待DOM变化 #

你的测试里目前只通过DOM的"Loading..."文本判断状态，但其实可以直接等待Hook的状态变为isSuccess，这样更精准：

const { result } = renderHook(() => useInfo(), { wrapper });

// 首先断言加载状态
expect(screen.getByText("Loading info...")).toBeInTheDocument();
expect(result.current.isLoading).toBe(true);

// 等待Hook完成请求，进入success状态
await waitFor(() => {
  expect(result.current.isSuccess).toBe(true);
});

// 现在再检查DOM和Hook数据
expect(screen.queryByText("Loading info...")).not.toBeInTheDocument();
expect(result.current.data).not.toBeNull(); // 这里应该能拿到数据了
console.log("Hook返回的数据：", result.current.data);

3. 配置QueryClient优化测试环境 #

React Query的默认缓存、重试机制可能会干扰测试结果，你可以在创建QueryClient时禁用这些特性，让测试更可控：

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: 0, // 禁用重试，避免测试无意义等待
      staleTime: 0,
      cacheTime: 0,
    },
  },
});

4. 单元测试最佳实践：Mock API请求，不要调用真实接口 #

目前你在测试中调用了真实的API，这不仅会让测试变慢、不稳定，还会依赖外部环境。推荐用Jest Mock掉axios.get，模拟返回固定数据：

// 在测试文件顶部Mock axios
import axios from 'axios';
jest.mock('axios');

describe("renders the Information component", () => {
  test("check the loading state and data fetch", async () => {
    // 模拟API返回的数据
    const mockInfoData = { id: 1, content: "Mocked info content" };
    axios.get.mockResolvedValue({ data: mockInfoData });

    const queryClient = new QueryClient({
      defaultOptions: { queries: { retry: 0 } },
    });

    // ... 你的wrapper和renderHook代码

    // 等待Hook成功后，断言数据匹配模拟值
    await waitFor(() => {
      expect(result.current.data).toEqual(mockInfoData);
    });
  });
});

5. 排查getInfo函数的返回逻辑 #

虽然你说getInfo里能打印出response，但可以再确保返回的response?.data确实有值：

const getInfo = async () => {
  const url = generateApiUrl(ENDPOINTS.GET_INFO, true);
  const response = await axios.get(url);
  console.log("API响应数据：", response.data); // 明确打印data属性
  if (!response?.data) {
    throw new Error("API未返回有效数据"); // 抛出错误，让测试能快速定位问题
  }
  return response.data;
};

总结 #

最可能的直接原因是你没有通过result.current访问Hook的返回值，其次是没有正确等待React Query的异步状态完成。先修改console.log(result)为console.log(result.current)，再配合等待isSuccess状态，应该就能看到数据了。

长期来看，Mock API请求是单元测试的最佳实践，能让你的测试更可靠、更高效。

备注：内容来源于stack exchange，提问作者ganesh kaspate