Apollo MockedProvider 无法使用 useLazyQuery 和 onCompleted 返回数据

Question

我正在使用 Apollo Client (3.3.16) MockedProvider 和 Jest + React 测试库来测试使用 useLazyQuery 和 onCompleted 属性的组件。但是，MockedProvider 无法调用 onCompleted 函数（在我的例子中是handleData()）。在console.log之后我发现onCompleted函数从未被触发过。有什么想法如何使用 useLazyQuery 测试组件（在我的例子中）？提前赞赏！我的反应组件代码是这样的：

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 推荐的方式测试代码时，十分之九的测试会失败，因为模拟响应与生产代码正在执行的查询不匹配。正如他们在当时的文档中所说：

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

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