介绍
在前端开发中，测试是至关重要的一环。@apollo/react-testing 是一个 npm 包，可用于测试使用 Apollo GraphQL 的 React 组件。这个包提供了许多有用的测试工具，可以帮助我们编写测试用例，测试组件行为，检测潜在的错误。
安装
要使用 @apollo/react-testing，您需要在项目中安装它。您可以使用 npm 或 yarn 进行安装，具体命令如下：
npm install --save-dev @apollo/react-testing
或
yarn add --dev @apollo/react-testing
使用
使用 @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
