使用`createMockClient` 测试非反应代码？答案

【问题标题】：Using `createMockClient` for testing non react code?使用`createMockClient` 测试非反应代码？
【发布时间】：2021-12-13 19:08:42
【问题描述】：

我有一个混合应用程序，将 Apollo 用于 React 和非 React 代码。但是，我找不到关于使用 apollo 客户端测试非反应代码的文档或代码示例，而不是使用 MockedProvider。但是，我确实注意到 apollo 从测试目录中导出了一个模拟客户端。

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

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

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

当尝试在测试中围绕该获取代码包装一个反应组件时，一个包装 MockedProvider 周围 apolloClient 的查询方法总是为模拟查询返回 undefined - 所以这似乎只适用于 useQuery 挂钩？

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

问候，值得信赖的

【问题讨论】：

标签： apollo-client

【解决方案1】：

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

虽然似乎没有记录，但 createMockClient 来自 '@apollo/client/testing' 可以通过与 MockedProvider 相同的模拟来模拟而不使用 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 } }
  )

【讨论】：