随着移动应用程序的需求不断增长，许多开发人员开始使用 React Native 来构建跨平台的移动应用程序。然而，测试移动应用程序的可靠性和功能完整性是极为重要的。
GraphQL 是一种用于 API 的查询语言，并且它与 React Native 结合使用非常方便。Enzyme 是一个流行的 JavaScript 测试工具，用于测试 React 和 React Native 应用程序中的组件，包括渲染、交互和状态。
在本文中，我们将探讨如何使用 Enzyme 测试 GraphQL 查询和突变以及如何在 React Native 中集成这两种技术，以确保您的应用程序代码的质量和可靠性。
准备工作
在开始使用 Enzyme 进行 GraphQL 测试之前，您需要掌握一些基础知识。您需要：
- React Native 知识
- GraphQL 知识
- Enzyme 知识
如果您不熟悉其中任何一项，请确保先学习相关内容。
安装 Enzyme
安装 Enzyme 非常简单，仅需运行以下命令：
npm install enzyme enzyme-adapter-react-16 --save-dev
此命令将 默认安装 Enzyme在 React 16 中使用 Adapter 套件。
集成 Enzyme 和 GraphQL
在 React Native 应用程序中集成 Enzyme 和 GraphQL 将您的测试代码集成到应用程序中，以确保您的代码质量。
以下是如何在您的应用程序中集成 Enzyme 和 GraphQL 的步骤：
- 安装所需的库。
npm install graphql-tag graphql --save
- 在测试工具中配置 Enzyme 适配器。
import enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
enzyme.configure({ adapter: new Adapter() });- 导入必要的文件。
import React from 'react';
import { ApolloProvider } from 'react-apollo';
import ApolloClient from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { createHttpLink } from 'apollo-link-http';
import { setContext } from 'apollo-link-context';
import makeRequest from './util/apiClient';- 创建 GraphQL 客户端。
-- -------------------- ---- -------
----- -------- - ----------------
---- ---------------------------------
---
----- -------- - -------------- - ------- -- -- -
----- ----- - -------------------------
------ -
-------- -
-----------
-------------- ----- - ------- --------- - -----
--
--
---
----- ----- - --- ----------------
----- ------ - --- --------------
----- --------------------------
------
---- 创建 ReactNative 组件，并将其包装在 ApolloProvider 中。
export default function App() {
return (
<ApolloProvider client={client}>
<Container />
</ApolloProvider>
);
}- 在测试工具中包装 Enzyme 测试组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ - -------------- - ---- --------------------------
------ ------------ ---- ----------------
------ - ------------- - ---- ------------------------
------ - -------------- - ---- -------------------
------ - ---------- - ---- ----------------------
------ ----- ---- --------
------ ---- ---- --------
-- ---- ------ ---- ------- --------- ----- ------
----- -------- - ----------------
---- ---------------------------------
---
----- -------- - -------------- - ------- -- -- -
----- ----- - -------------------------
------ -
-------- -
-----------
-------------- ----- - ------- --------- - -----
--
--
---
----- ----- - --- ----------------
----- ------ - --- --------------
----- --------------------------
------
---
----- ------------ - -
----------
------- - ---
------------- - ---
----------------- - ---
- -- -
----- ----- - ---------------------------
--- --- - ------
--------------- --------------- --------------
-----------
------------------
- -------- - ------ -- ------------------ ---------- --
--
------ ----
--
------ - ------------ --编写测试用例
现在，您已经完成了与 Enzyme 和 GraphQL 的集成。让我们来编写我们的第一个测试用例，以确保查询 GitHub API 是否有效。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ - ---- --------------------
------ - --------- - ---- -------------
------ - -------- - ---- ----------------
------ ---- ---- --------
------ --- ---- --------------
----- ------------ - -
----------- -------
------ ---------------
------------- -
----------- -----------------------
------ -
-
----------- -------------
----- ----- ---- ---
---- ----------------------------------------------
--
-
----------- -------------
----- ----- ---- ---
---- ----------------------------------------------
--
-
----------- -------------
----- ----- ---- ---
---- ----------------------------------------------
--
--
--
--
----- ----- - -
-
-------- -
------ ----------
---------- -
------ ---------------
--
--
------- -
----- -------------
--
--
--
------------------- ---- -- -- -
---------- ------ -------------- ----- -- -- -
----- ------- - ----- ---------------------- -------------------- --- --- --- ----
----- --------
--------------------- --------------- ----------- --------------------
---
---此测试用例使用 MockedProvider 将查询请求重定向到数据。然后它使用 mountWrapper() 函数来挂载 RepoList 组件。
这里还使用了 wait() 函数，它将控制测试超时并等待网络操作完成。
在此测试中，我们期望找到由 GitHub API 返回的 3 个存储库。
结论
在本文中，您已经了解了在 React Native 应用程序中使用 Enzyme 测试 GraphQL 查询和突变的步骤。我们学习了如何与 React 和 React Native 应用程序集成 Enzyme 和 GraphQL，以确保您的应用程序代码的质量和可靠性。我们还编写了一个测试用例来确保我们的查询有效。
掌握这些技能对于不断改进您的 React Native 应用程序非常重要，因此请在您的项目中使用这些新知识！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670b25a6d91dce0dc887d042