如何使用 Enzyme 在 React Native 中测试 GraphQL

面试官：小伙子，你的代码为什么这么丝滑？

随着移动应用程序的需求不断增长，许多开发人员开始使用 React Native 来构建跨平台的移动应用程序。然而，测试移动应用程序的可靠性和功能完整性是极为重要的。

GraphQL 是一种用于 API 的查询语言，并且它与 React Native 结合使用非常方便。Enzyme 是一个流行的 JavaScript 测试工具，用于测试 React 和 React Native 应用程序中的组件，包括渲染、交互和状态。

在本文中，我们将探讨如何使用 Enzyme 测试 GraphQL 查询和突变以及如何在 React Native 中集成这两种技术，以确保您的应用程序代码的质量和可靠性。

准备工作

在开始使用 Enzyme 进行 GraphQL 测试之前，您需要掌握一些基础知识。您需要：

  • React Native 知识
  • GraphQL 知识
  • Enzyme 知识

如果您不熟悉其中任何一项，请确保先学习相关内容。

安装 Enzyme

安装 Enzyme 非常简单，仅需运行以下命令：

--- ------- ------ ----------------------- ----------

此命令将 默认安装 Enzyme在 React 16 中使用 Adapter 套件。

集成 Enzyme 和 GraphQL

在 React Native 应用程序中集成 Enzyme 和 GraphQL 将您的测试代码集成到应用程序中，以确保您的代码质量。

以下是如何在您的应用程序中集成 Enzyme 和 GraphQL 的步骤：

  1. 安装所需的库。
--- ------- ----------- ------- ------
  1. 在测试工具中配置 Enzyme 适配器。
------ ------ ---- ---------
------ ------- ---- --------------------------

------------------ -------- --- --------- ---
  1. 导入必要的文件。
------ ----- ---- --------
------ - -------------- - ---- ---------------
------ ------------ ---- ----------------
------ - ------------- - ---- ------------------------
------ - -------------- - ---- -------------------
------ - ---------- - ---- ----------------------
------ ----------- ---- -------------------
  1. 创建 GraphQL 客户端。
----- -------- - ----------------
    ---- ---------------------------------
---

----- -------- - -------------- - ------- -- -- -
    ----- ----- - -------------------------
    ------ -
        -------- -
            -----------
            -------------- ----- - ------- --------- - -----
        --
    --
---

----- ----- - --- ----------------
----- ------ - --- --------------
    ----- --------------------------
    ------
---
  1. 创建 ReactNative 组件，并将其包装在 ApolloProvider 中。
------ ------- -------- ----- -
    ------ -
        --------------- ----------------
            ---------- --
        -----------------
    --
-
  1. 在测试工具中包装 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

阅读全文

猜你喜欢

  • Node.js 中的微服务架构设计及其实现方法

    前言 随着互联网的快速发展，网站的功能变得越来越复杂，原本单一的服务已无法满足需求，服务也需要进行切割，细分成独立的子服务，各自负责特定的一部分功能。这种架构就是微服务架构。

    8 天前
  • PM2 支持的 Node.js 版本列表

    在前端开发中使用 Node.js 是非常普遍的，而随着版本的升级，不同的 Node.js 版本之间也会存在一些兼容性问题。而 PM2 作为一款 Node.js 进程管理工具，也需要考虑这些兼容性问题。

    8 天前
  • 如何在 TailwindCSS 中使用自定义消息通知？

    TailwindCSS 是一种流行的 CSS 框架，它允许开发人员通过预定义的类轻松地编写 CSS 样式。该框架还包含许多 UI 组件，如按钮、卡片和表格等。在使用 TailwindCSS 开发网站时...

    8 天前
  • 使用 Next.js 和 Firebase 构建聊天应用程序的全面指南

    作为前端开发人员，构建聊天应用程序是一个很有趣也很实用的项目。在本文中，我们将介绍如何使用 Next.js 和 Firebase 构建一个全栈聊天应用程序。 简介 Next.js 是一个流行的 Rea...

    8 天前
  • React Native 中使用 WebView 的完整教程

    React Native 是一种基于 React 构建的移动应用开发框架，它可以让我们使用 JavaScript 和 React 的优势编写原生 iOS 和 Android 应用。

    8 天前
  • 解决 RESTful API 中的参数解析问题

    背景 RESTful API 是一种常见的接口设计风格，其中 URL 通常包含一些参数。在后端开发中，可以使用各种框架和库来完成 URL 参数的解析。然而，在前端开发中，我们通常需要手动解析 URL ...

    8 天前
  • 如何在 GraphQL 中使用分页技术？

    介绍 前端开发人员在使用 GraphQL 构建应用程序时会遇到需要处理分页数据的情况。在本文中，我们将深入探讨如何使用 GraphQL 中的分页技术处理大数据集合。

    8 天前
  • Redis 使用的正确姿势：使用 Pipeline 批量操作

    介绍 Redis 是一种开源的基于内存的 key-value 存储系统，可以用作数据库、缓存和消息队列。它支持各种数据结构，包括字符串、哈希表、列表、集合和有序集。

    8 天前
  • Headless CMS 中批量导入导出数据的方法探讨

    在前端开发中，我们常常需要使用 CMS（内容管理系统） 来存储和管理网站的数据。而近年来，Headless CMS 成为了越来越多开发者的选择。Headless CMS 可以将内容和结构分离，使得开发...

    8 天前
  • 每个 Web 开发人员都应该知道的 Chai.js 断言技巧

    什么是 Chai.js Chai.js 是一个流行的断言库，它提供了许多易于使用的语法来编写测试用例。它能够与各种测试框架（如 Mocha、Jasmine、Jest等）结合使用。

    8 天前
  • Redex: Redux 和 React.js 结合使用的共同构建 SPA 的库

    摘要 在前端开发中，SPA（Single-Page Application）已经成为了越来越流行的选择，它具有较好的用户体验和开发模式。Redux 和 React.js 作为前端最常用的状态管理工具和...

    8 天前
  • ES8 中新特性： Async 函数和 await 操作符

    在现代 Web 开发中，前端 JavaScript 成为了无法忽视的一部分。由于现代浏览器对 ES6 和更新版本的支持性不断提高，我们也有越来越多的选择来构建 JavaScript 应用程序。

    8 天前
  • 如何在 TailwindCSS 中使用自定义弹出层？

    在前端网页设计中，弹出层是一种很常见的交互效果。TailwindCSS 是一个流行的前端框架，它的设计理念是“低级别的原子类构建”，可以帮助我们快速构建精美的 UI 交互效果。

    8 天前
  • 如何在 Next.js 中集成 Auth0 认证系统

    在当前互联网的应用中，用户认证系统是不可或缺的一个功能。Auth0 是一种通用型认证和授权解决方案，支持各种身份验证，包括社交网络身份验证、企业身份验证和自定义身份验证。

    8 天前
  • PWA 技术实现原理及应用场景解析

    什么是 PWA？ PWA（Progressive Web App，下称渐进式 Web 应用）是一种基于 Web 技术栈实现的应用开发方式，它结合了 Web 应用和 Native 应用的优点，可以实现...

    8 天前
  • 怎样解决 Node.js Express.js 中的常见 bug

    Node.js 是目前被广泛使用的一种服务器端 JavaScript 运行时环境，而 Express.js 是一种流行的 Node.js web 框架。在开发过程中，我们可能会遇到一些常见的 bug，...

    8 天前
  • Serverless 架构中的自动扩展技术

    随着云计算技术的不断发展，Serverless 架构逐渐成为了业界关注的热点。Serverless 架构的核心思想是将运行应用所需要的服务器置于云端，以构建更具弹性和可扩展性的应用，同时为开发者提供更...

    8 天前
  • CSS Grid 布局中如何解决多余空白问题

    什么是 CSS Grid 布局？ CSS Grid 布局是一种二维网格布局系统，它可以让前端开发者更加方便地创建复杂的布局。相比于传统的布局方式，CSS Grid 布局可以更加灵活、精细地控制布局，同...

    8 天前
  • 如何使用 ES10 中的 Array.sort() 方法实现特定排序需求

    在前端开发中，我们经常需要对数组进行排序操作。ES10 中新增的 Array.sort() 方法提供了更多的排序选项，能够帮助我们更方便地实现特定排序需求。 数组排序 首先，让我们来回顾一下数组排序的...

    8 天前
  • Fastify 如何使用 Redis 实现缓存？

    在网络传输过程中，数据传输速度常常是制约性能的瓶颈之一，特别是当网站遇到访问高峰时。在这种情况下，缓存就成为了一种重要的解决方案。Redis 是一个高性能的键值对数据库，有着较高的读写速度和可扩展性，...

    8 天前

相关推荐

    暂无文章