测试使用useQuery的自定义Hook时出现QueryClient未设置错误

测试环境与项目运行环境完全隔离，你在项目入口配置的QueryClientProvider不会自动作用到测试用例中，必须在测试里单独为renderHook提供QueryClient上下文。

具体修改步骤 #

1. 在测试文件中导入QueryClient和QueryClientProvider
2. 创建测试专用的QueryClient实例
3. 通过renderHook的wrapper参数，将自定义Hook包裹在QueryClientProvider中

修改后的测试代码如下：

import { QueryClient, QueryClientProvider } from 'react-query';
import { renderHook } from '@testing-library/react';
import { useJaime } from './useJaime'; // 替换为你的Hook实际路径

describe('Testando hooks customizados: ', () => {
  // 创建测试用的QueryClient
  const queryClient = new QueryClient();

  // 定义wrapper组件，提供QueryClient上下文
  const wrapper = ({ children }) => (
    <QueryClientProvider client={queryClient}>
      {children}
    </QueryClientProvider>
  );

  test('useJaime hook正常初始化', () => {
    const { result } = renderHook(useJaime, { wrapper });
    // 可添加断言验证状态，比如检查加载状态
    expect(result.current.isLoading).toBe(true);
  });
});

额外优化：复用Wrapper #

如果有多个测试用例需要用到QueryClient，可以把wrapper抽成通用函数，避免重复代码：

const createWrapper = () => {
  const queryClient = new QueryClient();
  return ({ children }) => (
    <QueryClientProvider client={queryClient}>
      {children}
    </QueryClientProvider>
  );
};

// 在测试中调用
const { result } = renderHook(useJaime, { wrapper: createWrapper() });

这样就能确保测试中的useQuery能获取到QueryClient实例，解决报错问题。

内容的提问来源于stack exchange，提问作者Douglas de Brito