介绍
在前端开发中，测试是至关重要的一环。@apollo/react-testing 是一个 npm 包，可用于测试使用 Apollo GraphQL 的 React 组件。这个包提供了许多有用的测试工具，可以帮助我们编写测试用例，测试组件行为，检测潜在的错误。
安装
要使用 @apollo/react-testing，您需要在项目中安装它。您可以使用 npm 或 yarn 进行安装，具体命令如下：
--- ------- ---------- ---------------------
或
---- --- ----- ---------------------
使用
使用 @apollo/react-testing，我们需要创建一个提供了 Apollo Client 的测试环境，并向 Apollo Client 注入模拟的 Query/Mutation 响应。下面是一个基本的测试用例，使用了 @apollo/react-testing 来测试一个带有 loading、error 和 data 的子组件：
------ - ------- ---- - ---- -------------------------
------ - -------------- - ---- ------------------------
------ - --- - ---- ---------------
------ ----------- ---- ----------------
----- ----- - -
-
-------- -
------ ----
----- ------------ ---- -
----------- ---- -
--
----
-
-
--
---------- -
--- --
--
--
------- -
----- -
-------- -
--- --
----- --- ------
--
--
--
--
--
-------- ------- ---- ------ ----- -- -- -
----- - --------- - - -------
--------------- --------------
------------ ------ --
------------------
--
----- ------- -- ------------- --------
---这里我们引入了 @testing-library/react 中的 render 和 wait 方法来渲染组件并等待查询完成。我们使用 MockedProvider 组件来提供一个模拟的 Apollo Client 环境，其内部的 mocks 属性包含两个对象，一个请求 myQuery 的查询，一个传递给 myQuery 的变量 id。我们在 result 属性中返回了一个包含 data 的对象，此时 MyComponent 组件可在此查询到 id 和 name，组件将在渲染时向数据源发出请求。
最后，我们调用了 wait 方法来等待组件显示了文本 'My Name' 后再断言，以确认查询已成功执行。
总结
使用 @apollo/react-testing，我们可以编写易于维护、可靠的测试用例，验证 React 组件的行为以及与其绑定的 GraphQL 查询、突变。通过使用该包，可以显著提高 GraphQL 应用程序的开发效率、代码质量和稳定性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/196149