在编写现代的 React 应用程序时，更多的组件使用了 GraphQL 查询来获取数据。为了让这些组件正常工作，通常需要使用 Apollo Client。但是，在针对这些组件编写单元测试时，如何确保 Apollo Client 的行为正确呢？本文将探讨如何使用 Enzyme 测试组件中使用的 Apollo Client。
Enzyme
Enzyme 是 Facebook 开源的 React 测试工具库，它可以让你轻松地渲染组件，并且可以对组件进行深入的断言比较。Enzyme 提供了三种渲染方式：
shallow：浅渲染，仅渲染组件的第一层，不触发子组件的生命周期方法。mount：完全渲染，渲染完整的组件树，包括子组件，会触发子组件的生命周期方法。render：渲染静态 HTML，使用 Cheerio 提供的 jQuery 风格的 API 来分析和查询渲染后的 HTML。
Apollo Client
Apollo Client 是一个开源的 GraphQL 客户端，它可以自动管理应用程序状态，并根据 GraphQL 查询自动缓存数据。使用 Apollo Client，可以轻松地将 GraphQL 与 React 集成在一起，并对数据进行更好的控制。如果你还没有熟悉 Apollo Client，可以参考官方文档进行学习。
在 Enzyme 中使用 Apollo Client
在测试组件中使用了 Apollo Client 的情况下，我们可以使用 mockedProvider 函数来模拟 GraphQL 请求和响应。mockedProvider 是一个高阶组件，它可以将被测试组件包装在一个 GraphQL 提供程序中。这个提供程序可以接受一个 mocks 参数，用于自定义查询的响应。你可以根据你的测试情况来定义自己需要的响应。
下面是一个示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------------- - ---- -------------------------
------ - ----- - ---- ---------
------ - ----------- - ---- ----------------
------ - -------- - ---- ------------
----- ----- - -
-
-------- -
------ ---------
--
------- -
----- -
-------- ------- ----------
--
--
--
--
----- -------- - -- --
------
--------------- ------------- --------------------
------------ --
------------------
--
----------------------- -- -- -
----------- ---- ------ ----- -- -- -
----- ------- - -----------
----- --- --------------- -- ---------------------
-----------------
---------------------------------------- -----------
---
---在上述代码中，我们使用了 mount 来渲染测试组件。测试组件被包装在 MockedProvider 中，并传递了一个数组 mocks，数组中包含了模拟的 GraphQL 查询。在这个例子中，我们模拟了一个查询 MY_QUERY，其响应包含了一个字段 myField，值为 mocked response。
由于 MockedProvider 是一个异步组件，我们需要在测试代码中使用 await new Promise(resolve => setTimeout(resolve)) 来等待异步的查询完成，然后更新组件，最后检查组件是否按预期渲染。
总结
使用 Enzyme 和 Apollo Client 可以对组件进行深入的断言比较，并确保组件中使用的 Apollo Client 行为正确。在本文中，我们探讨了使用 mockedProvider 函数在 Enzyme 中测试组件使用的 Apollo Client。这种方法可以在组件中使用任何 GraphQL 查询和响应进行测试。通过测试你可以更好地了解你的代码，并确保你的应用程序正常工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64842dd848841e9894353f96