MockedProvider在组件查询参数变更时无法正常工作的问题

问题根因 #

你当前的mock只配置了where:7的请求，但组件初始化时会先发起where:5的请求——这个请求找不到对应的mock，会让Apollo客户端进入错误状态，后续哪怕变量更新为7，客户端也没法正常处理新的请求。另外测试里的act只等了一次timeout，没覆盖到查询完成的时机。

具体解决步骤 #

1. 给所有请求场景加mock #

把初始的where:5请求也配上mock，保证每一次请求都有对应的响应：

const mockContractPricing = [
  // 处理初始where=5的请求
  {
    request: {
      query: QUERY_PRODUCTS,
      variables: { where: 5 },
    },
    result: { data: { products: [] } }, // 空数据或者测试用的占位数据都行
  },
  // 处理更新后where=7的请求
  {
    request: {
      query: QUERY_PRODUCTS,
      variables: { where: 7 },
    },
    result: { data: { products: productsData } },
  },
];

2. 用waitFor等待查询完成 #

测试里别只靠setTimeout等待，改用waitFor来确保查询完成：

import { waitFor } from '@testing-library/react';

describe('dsfgdas', () => {
  it('ggg', async () => {
    const { container } = render(
      <MockedProvider mocks={mockContractPricing} addTypename={false}>
        <TestComp />
      </MockedProvider>
    );

    // 等待查询完成，这里可以加具体的断言，比如组件渲染了产品数据
    await waitFor(() => {
      // 示例：expect(container.querySelector('.product-item')).toBeInTheDocument();
    });

    console.log(container.innerHTML);
  });
});

3. 确认组件内查询配置（可选） #

你的组件里用useMemo生成where，依赖testValue，这部分没问题，变量变化时会触发useQuery重新发起请求，不用额外调整。

核心要点 #

Apollo的MockedProvider是严格匹配请求的query和variables的，任何一次无匹配的请求都会让客户端进入异常状态，必须给所有可能的请求都配置对应的mock，同时测试要等待新的查询完成才能拿到正确数据。

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