关于使用createMockClient测试非React场景Apollo代码的咨询

1. createMockClient 可用性说明 #

你提到的createMockClient是@apollo/client/testing包公开导出的稳定API，虽官方文档覆盖较少，但完全可以用于生产环境的测试场景，专门适配非React环境的客户端Mock需求。

2. MockedProvider不生效的原因 #

MockedProvider本质是React Context提供者，仅对通过Context获取客户端实例的React钩子（如useQuery、useMutation）生效。你在Node环境直接调用自定义实例的apolloClient.query方法，完全不会走MockedProvider的Mock链路，因此返回undefined是预期表现。

3. 具体Mock方案 #

方案1：直接使用createMockClient（最简方案） #

该方法的Mock配置格式和MockedProvider的mocks参数完全兼容，无需额外调整配置：

import { createMockClient, gql } from '@apollo/client/testing';

// 定义查询语句
const GET_USER = gql`
  query GetUser($id: ID!) {
    user(id: $id) { id name }
  }
`;

// 定义Mock响应
const mocks = [
  {
    request: { query: GET_USER, variables: { id: '123' } },
    result: { data: { user: { id: '123', name: '测试用户' } } }
  }
];

// 实例化Mock客户端
const mockClient = createMockClient({
  mocks,
  delay: 0 // 可选，模拟网络延迟的毫秒数
});

实例化完成后直接将mockClient传入你的数据获取逻辑，调用mockClient.query的返回结果和真实客户端完全一致。

方案2：基于MockLink自定义客户端（灵活配置） #

如果你需要和线上客户端保持完全一致的缓存、默认配置等，可以用官方明确支持的MockLink自行组装实例：

import { ApolloClient, InMemoryCache } from '@apollo/client';
import { MockLink } from '@apollo/client/testing';

const mocks = [/* 同上的Mock配置 */];

const mockClient = new ApolloClient({
  link: new MockLink(mocks),
  cache: new InMemoryCache(),
  // 可添加和线上客户端完全一致的其他配置
  defaultOptions: { query: { fetchPolicy: 'network-only' } }
});

4. 测试场景适配 #

如果你的数据获取逻辑没有将客户端作为参数传入，而是内部引入了全局实例，可以用测试框架的模块Mock能力替换全局实例，以Jest为例：

// 假设全局客户端从`@/lib/apollo`的`getApolloClient`方法导出
jest.mock('@/lib/apollo', () => ({
  getApolloClient: () => mockClient
}));

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