使用MockedProvider测试Apollo查询组件时遇client上下文缺失错误求助

以下是几种排查和解决方法：

• 等待异步查询完成
  MockedProvider处理GraphQL查询是异步的，直接同步断言会导致组件还未获取到上下文client就渲染，引发错误。使用测试库的waitFor或act等待异步操作完成：

  import { render, waitFor } from '@testing-library/react';
  import { MockedProvider } from '@apollo/client/testing';
  import MyWrapper from './MyWrapper';
  
  test('组件渲染正常', async () => {
    const mocks = [/* 你的Mock配置 */];
    const { getByTestId } = render(
      <MockedProvider mocks={mocks}>
        <MyWrapper />
      </MockedProvider>
    );
  
    await waitFor(() => {
      expect(getByTestId('data-container')).toBeInTheDocument();
    });
  });
  

• 校验Mock格式正确性
  确保每个Mock对象包含request（指定查询和变量）和result（返回数据）字段，格式错误会导致MockedProvider无法正确初始化client：

  const mocks = [
    {
      request: {
        query: YOUR_GRAPHQL_QUERY,
        variables: { id: '123' } // 对应查询的变量（如果有）
      },
      result: {
        data: {
          // 匹配查询结构的返回数据
          item: { id: '123', name: 'Test Item' }
        }
      }
    }
  ];
  

• 显式传递ApolloClient实例
  若MyWrapper或其子组件对client有直接依赖，可显式创建client并传递给MockedProvider：

  import { ApolloClient, InMemoryCache } from '@apollo/client';
  import { MockedProvider } from '@apollo/client/testing';
  
  const testClient = new ApolloClient({
    cache: new InMemoryCache(),
    uri: 'https://test.example.com/graphql' // 测试环境地址，可填任意值
  });
  
  render(
    <MockedProvider mocks={mocks} client={testClient}>
      <MyWrapper />
    </MockedProvider>
  );
  

• 移除不必要的ApolloProvider嵌套
  检查MyWrapper内部或子组件是否自行包裹了ApolloProvider，这会覆盖MockedProvider的上下文，导致client找不到。测试时需移除这类嵌套的Provider。

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