Jest测试中useQuery Hook返回undefined的问题求助

你已经正确mock了UserApi但useQuery仍返回undefined，核心问题在于测试环境中React Query的QueryClient未正确初始化，或是你没有等待异步请求完成。下面是分步解决方案：

1. 给测试配置QueryClientProvider #

React Query依赖QueryClient管理查询状态与缓存，测试环境中必须提供这个上下文才能让useQuery正常工作。你需要在渲染组件时包裹QueryClientProvider，并创建一个测试专用的QueryClient（禁用重试等不必要的配置）：

// 在测试文件或root-render配置中添加
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

// 创建测试用QueryClient，禁用重试避免测试超时
const testQueryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: false,
      refetchOnWindowFocus: false,
      refetchOnMount: false,
    },
  },
});

// 封装带QueryClient的渲染函数
const renderWithQuery = (ui) => {
  return render(
    <QueryClientProvider client={testQueryClient}>
      {ui}
    </QueryClientProvider>
  );
};

// 修改mockAndRender方法，使用新的渲染函数
function mockAndRender(userFiles, userStatus, userSecondaryStatus) {
  useCurrentUserInfo.mockReturnValue([{}]);
  mockApi(userFiles, userStatus, userSecondaryStatus);
  renderWithQuery(<UserDetails />);
}

2. 等待异步请求完成再做断言 #

useQuery是异步执行的，渲染后立刻断言的话，请求还处于pending状态，data自然是undefined。你需要用Testing Library的异步查询方法（如waitFor、findBy*）等待请求完成：

describe('<UserDetails />', () => {
  it('should render user data correctly', async () => {
    mockAndRender([1], 'Awarded', null);
    
    // 等待页面上依赖user数据的元素加载完成（比如显示userStatus的文本）
    const userStatusElement = await screen.findByText('Awarded');
    expect(userStatusElement).toBeInTheDocument();
    
    // 验证API调用是否符合预期
    expect(UserApi.getUserById).toHaveBeenCalledTimes(1);
    expect(UserApi.getUserById).toHaveBeenCalledWith('userId');
  });
});

3. 验证mock API的返回格式 #

你的mock API返回{ data: {...} }，组件中useQuery也通过.then(({ data }) => data)提取了内层数据，格式是匹配的。只需确保mock的Promise是resolve状态，不要误写成reject即可。

4. 可选：重置QueryClient避免测试污染 #

如果有多个测试用例，建议在每个测试前重置QueryClient与mock，避免缓存或残留状态影响结果：

beforeEach(() => {
  testQueryClient.clear();
  jest.clearAllMocks();
});

完成以上步骤后，useQuery就能正确接收mock API返回的数据，不会再返回undefined了。

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