Apollo MockedProvider 无法使用带有 onCompleted 的 useLazyQuery 返回数据

Question

我正在使用 Apollo Client (3.3.16) MockedProvider 和 Jest + react 测试库来测试使用带有 onCompleted 属性的 useLazyQuery 的组件。但是，MockedProvider 不能调用 onCompleted 函数（在我的例子中是handleData()）。在console.log之后我发现onCompleted函数从来没有被触发过。任何想法如何使用 useLazyQuery 测试组件（在我的情况下）？提前点赞！ 我的 react 组件代码是这样的：

const handleData = data => { // this function never been called for testing
    setData(data.dataWithFilters.data);
  };

  const [loadData, { loading }] = useLazyQuery(
    GET_DATA,
    {
      variables: {
        id: productId,
        first: 999999,
        page: 1,
        isBase: true
      },
      onCompleted: handleData, // never been triggered for testing
      fetchPolicy: "network-only"
    }
  );

  useEffect(() => { // works fine
    loadData({
       variables: {
        id: productId,
        first: 999999,
        page: 1,
        isBase: true
      },
      fetchPolicy: "network-only"
    });
  }, [loadData, productId]); 

我的测试代码是：

 const renderComponent = (mocksData) => {
    render(
      <MockedProvider
        mocks={mocksData}
        defaultOptions={{
          query: { fetchPolicy: "no-cache" },
          watchQuery: { fetchPolicy: 'no-cache' },
        }}
        addTypename={false}
      >
        <ServicesContextProvider freightRateServices={{}}>
          <ContractInformationPageProvider>
            <MemoryRouter initialEntries={["contracts/311"]}>
              <Route path="products/:productId">
                <ContractInformationPage />
              </Route>
            </MemoryRouter>
          </ContractInformationPageProvider>
        </ServicesContextProvider>
      </MockedProvider>,
      {
        wrapper: BrowserRouter
      }
    );
  };

Answer 1

我也面临同样的问题。不幸的是，当您按照 Apollo 推荐的方式测试代码时，10 次测试中有 9 次失败，因为模拟响应与您的生产代码正在执行的查询不匹配。正如他们在当时的文档中所说：

您的测试必须执行与模拟的形状和变量完全匹配的操作才能接收相关的模拟响应。

即使您的模拟 98% 接近，并且仅相差一个字段，您也不会在测试中收到任何数据。 更糟糕的是，您不会意识到这一点，因为它不会记录错误，只会使您的数据字段未定义。因此，请非常仔细地观察查询字段和变量是什么并进行比较你做的模拟。