使用 Enzyme & MockProvider 期望/接收状态的正确方法答案

【问题标题】：Correct way to expect/receive state with Enzyme & MockProvider使用 Enzyme & MockProvider 期望/接收状态的正确方法
【发布时间】：2020-09-19 02:50:13
【问题描述】：

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

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

我阅读了 Apollo 的有关测试的文档，并写了一个这样的测试：

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')

但我发现测试不会根据我放置的模拟进行更新。我对此进行了测试，我将此值作为模拟传递：

mock = {
    request: {
        query: GET_PRODUCTS,
        variables: { zip: "32005" }
    },
    result: {
        data: { specials: [] }
    }
}

...after tests
expect(wrapper.find(message).prop('data-id')).toEqual('invalid')

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

似乎无论我通过我的模拟提供程序它都不会等待它通过。我也在使用 Apollo 推荐的等待包。

【问题讨论】：

标签： graphql enzyme react-apollo

【解决方案1】：

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

无需将您的测试实例包装在 Mock 提供程序中。您可以使用 jest 模拟整个模块（自定义挂钩）并使用 mockReturnValue 方法来模拟不同的行为（加载、数据、错误）
您可以在开发过程中轻松地在实际查询或本地文件系统中的一些模拟数据之间切换。

请参阅此blog 了解实现细节和演示应用程序。

【讨论】：

【解决方案2】：

如果你想用 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,
    },
  ]),
}));

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

【讨论】：