Graphql 期望/接收酶状态的正确方法&；模拟提供者

我正在测试一个使用graphql useLazyQuery的组件。MockProvider由Apollo推荐库@Apollo/react testing提供。我想测试是否根据查询返回的数据长度呈现特定消息。我有如下结构的html元素：

<div className="message" data-id={props.data ? props.data.specials.length > 0 ? 'valid' : 'invalid' : ''}>
    ...children
</div>

mock = {
    request: {
        query: GET_PRODUCTS,
        variables: { zip: "91001" }
    },
    result: {
        data: { 
            specials: [
                {
                    "_id": "5ecf28c459d3781a2e99738e",
                },
                {
                    "_id": "5ecf28c459d3781a2e99738f",
                }
            ] 
       }
   }
}

wrapper = mount(
    <MockedProvider mocks={[mock]} addTypename={false}>
        <Store.Provider value={[{ loading: false, zip: null }]}>
            <GetZipCode />
        </Store.Provider>
    </MockedProvider>
)

await wait(0)

expect(wrapper.find(message).prop('data-id')).toEqual('valid')

对于这两个测试，预期值为“”，这是html元素中数据id属性的初始值。如果将初始值设置为“无效”，而不是设置为“”，则测试中的预期值将输出“无效”

---

似乎无论我通过了什么样的模拟提供者，它都不会等待它通过。我也在使用Apollo推荐的wait包。

在使用useLazyQuery进行测试时，我遇到了类似的问题。我建议在useLazyQuery之上编写一个自定义钩子。这将有两个好处：

无需在模拟提供程序中包装测试实例。您可以使用jest模拟整个模块（自定义钩子），并使用mockReturnValue方法模拟不同的行为（加载、数据、错误）

在开发过程中，您可以轻松地在实际查询或本地文件系统中的一些模拟数据之间切换

---

有关实现细节和演示应用程序的信息，请参阅此文档。

在使用useLazyQuery进行测试时，我遇到了类似的问题。我建议在useLazyQuery之上编写一个自定义钩子。这将有两个好处：

无需在模拟提供程序中包装测试实例。您可以使用jest模拟整个模块（自定义钩子），并使用mockReturnValue方法模拟不同的行为（加载、数据、错误）

在开发过程中，您可以轻松地在实际查询或本地文件系统中的一些模拟数据之间切换

---

有关实现详细信息和演示应用程序，请参阅此文档。

如果您想使用jest进行模拟，请使用以下方法

jest.mock("apollo-client", () => ({
  __esModule: true,
  useQuery: (query: any) => {
    //other mocks if needed
  },
  useLazyQuery: jest.fn().mockReturnValue([
    jest.fn(),
    {
      data: {
        yourProperties: "Add Here",
      },
      loading: false,
    },
  ]),
}));

---

如您所见，这种方法甚至返回在要测试的代码中调用的模拟函数。

如果您想使用jest进行模拟，可以使用以下方法

jest.mock("apollo-client", () => ({
  __esModule: true,
  useQuery: (query: any) => {
    //other mocks if needed
  },
  useLazyQuery: jest.fn().mockReturnValue([
    jest.fn(),
    {
      data: {
        yourProperties: "Add Here",
      },
      loading: false,
    },
  ]),
}));

如您所见，这种方法甚至返回在要测试的代码中调用的模拟函数