已用QueryClientProvider包裹测试仍报错：No QueryClient set，如何解决？

可能的原因及修复方案 #

1. React Query版本与导入路径不匹配 #

React Query v4+ 需从 @tanstack/react-query 导入 QueryClient 和 QueryClientProvider；v3及以前版本则从 react-query 导入。导入路径错误会导致Provider无法正确注入QueryClient。

检查你的导入语句：

// v4+ 正确导入
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

// v3及以前 正确导入
import { QueryClient, QueryClientProvider } from 'react-query';

2. 组件内部存在未被Provider覆盖的React Query调用 #

如果Selector或其子组件在挂载阶段同步执行依赖QueryClient的逻辑（比如顶层调用useQuery），可能导致Provider未完成注入就触发调用。可以给QueryClient添加测试环境专属配置，避免异步逻辑干扰：

describe("Selector", () => {
  let queryClient;

  beforeEach(() => {
    queryClient = new QueryClient({
      defaultOptions: {
        queries: {
          retry: false,
          cacheTime: 0,
        },
      },
    });

    render(
      <QueryClientProvider client={queryClient}>
        <ErrorBoundary FallbackComponent={({ error }) => <div>Something went wrong: {error.message}</div>}>
           <Selector content={content} setLanguageCallback={() => {}} />
        </ErrorBoundary>
      </QueryClientProvider>,
    );
  });

  it("Is there a hello test text", () => {
    expect(screen.getByText("Hello")).toBeInTheDocument();
  });
});

3. Jest Mock破坏了React Query模块 #

若测试文件中存在对React Query的mock代码，会覆盖真实的Provider逻辑，导致QueryClient无法注入。检查是否有类似代码并移除：

jest.mock('@tanstack/react-query'); // 移除该mock

4. ErrorBoundary干扰Provider作用域 #

暂时移除ErrorBoundary，直接渲染Selector组件，排查是否是ErrorBoundary内部逻辑导致Provider未生效。若移除后报错消失，需检查ErrorBoundary的FallbackComponent是否使用了React Query Hook且未被正确包裹。

5. 自定义渲染函数未集成Provider #

如果使用了自定义的渲染函数而非React Testing Library原生render，需确保该函数内部也包裹了QueryClientProvider。

快速排查步骤 #

1. 移除ErrorBoundary测试，定位问题来源；
2. 核对React Query版本与导入路径是否匹配；
3. 检查测试文件中是否存在React Query相关mock；
4. 在QueryClient初始化时添加日志，确认实例已创建并传递给Provider。

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