使用“createMockClient”来测试非反应代码？

Question

我有一个混合应用程序，它使用 Apollo 来处理 React 和非 React 代码。\n但是，我无法\xe2\x80\x99 找到有关使用 apollo 客户端测试非 React 代码的文档或代码示例，而不是使用 MockedProvider。然而，我确实注意到 apollo 从测试目录中导出了一个模拟客户端。

\n

import { createMockClient } from '@apollo/client/testing';\n

\n

我还没有找到任何有关此 API 的文档，我想知道它是否打算公开使用，如果不是，支持的方法是什么。

\n

我需要这个的原因很简单：当使用 Next.js\xe2\x80\x99 SSR 和/或 SSG 功能时，数据获取和实际数据渲染被分成单独的函数。\n因此获取代码不是使用 React，而是使用 Node。 \n因此我使用 apolloClient.query 来获取我需要的数据。

\n

当尝试在测试中围绕该获取代码包装反应组件时，将 MockedProvider 包装在 apolloClient\xe2\x80\x99s 查询方法周围，对于模拟查询始终返回未定义 - 所以看来这只适用于 useQuery 挂钩？

\n

您知道如何在非反应代码中模拟客户端吗？\n提前感谢您的支持。如果您需要我提供任何进一步的信息，请随时询问。

\n

问候，\nHorstcredible

\n

Answer 1

我处于类似的位置，我想使用 MockedProvider 并模拟客户端类，而不是useQuery按照此处记录的方式使用：https ://www.apollographql.com/docs/react/development-testing/testing/

尽管似乎没有记录，但createMockClientfrom'@apollo/client/testing'可以传递与MockedProvider没有 .mock 的模拟相同的模拟useQuery。这些示例假设您有一个 MockedProvider：

export const mockGetAssetById = async (id: Number): Promise<any> => {
  const client = createMockClient(mocks, GetAsset)
  const data = await client.query({
    query: GetAsset,
    variables: id,
  })
  return data
}

完成与以下相同：

const { data } = useQuery(
    GetAsset,
    { variables: { id } }
  )