使用 Enzyme 和 Jest 快速测试 React 应用程序

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

使用 Enzyme 和 Jest 快速测试 React 应用程序

前端开发者在开发 React 应用程序时，如何保证代码的质量和功能的可靠性是一个必须要面对的难题。一个好的测试工具可以有效地解决这个问题。这篇文章将介绍如何使用 Enzyme 和 Jest 这两个流行的 React 测试工具，帮助我们快速地实现 React 应用程序的测试。

Enzyme

Enzyme 是一个由 Airbnb 开源的 React 测试工具，它可以帮助我们快速和灵活地测试 React 组件。Enzyme 具有以下几个特点：

  • 可以模拟 React 组件的渲染和交互过程，使得测试代码尽可能接近真实环境。

  • 提供了多种 API 用于轻松定位和查询组件中的元素，从而方便测试组件的状态和交互。

  • 支持多种测试方式，例如快照测试、单元测试、集成测试等。

安装和配置 Enzyme

要使用 Enzyme 进行测试，我们需要先安装它以及 React 和 Jest。

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

然后在 Jest 的配置文件中进行配置：

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

在 src/setupTests.js 文件中进行 Enzyme 的初始化和配置：

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

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

这样就完成了 Enzyme 的安装和配置，我们现在可以开始实际测试 React 组件了。

测试组件状态

首先，我们来看看如何测试一个普通的 React 组件的状态。下面是一个简单的计数器组件：

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

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

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

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

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

我们可以使用 Enzyme 的 shallow 函数来浅渲染 Counter 组件并查询其中的状态：

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

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

shallow 函数将 Counter 组件假装成它所包含的 DOM 树的展开结果，并返回一个对象来代表它。我们可以使用 find 方法来查找 Counter 子元素中的元素并查询其文本。simulate 方法可以模拟用户交互，通过触发 click 事件来增加计数器。 最后，我们保存快照以便比较。

测试组件交互

接下来，我们来看看如何测试一个响应用户交互的组件。下面是一个简单的表格组件，可以让用户添加、删除、和编辑数据：

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

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

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

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

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

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

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

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

我们可以使用 mount 方法来完全渲染 Table 组件并查询其中的元素。下面是测试代码，我们使用了 describe 和 it 函数来组织测试用例：

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

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

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

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

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

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

我们使用表格中的三个操作（添加、删除和编辑）分别执行了测试用例。我们可以使用 at 方法和索引来定位不同的元素。在编辑测试中，我们先点击编辑按钮来启动编辑模式，然后输入新的名字和年龄，最后点击保存按钮来保存修改。toMatchSnapshot() 方法用于进行快照测试。

Jest

Jest 是 Facebook 开源的一个 JavaScript 测试框架，它能帮助我们对 JavaScript 代码进行单元测试、集成测试和端到端测试等不同层次的测试。Jest 具有以下几个特点：

  • 自带 test runner 和 assertion 库，无需额外安装库。

  • 提供了代码覆盖率检测、快照测试、异步代码测试等丰富的测试工具。

  • 配置简单、易于使用。

安装和配置 Jest

要使用 Jest，我们需要先安装它以及 React 和 Enzyme。

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

在项目根目录下创建 jest.config.js 文件，进行 Jest 的配置：

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

在 src/setupTests.js 文件中进行 Jest 和 Enzyme 的初始化和配置：

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

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

Jest 和 Enzyme 都已经配置好了，现在我们可以在项目中编写测试用例。

测试工具和命令

Jest 提供了很多测试工具和命令，这里介绍其中常见的几个：

  • test ：测试命令，用于运行所有测试用例。

  • describe 和 it ：用于组织测试用例，describe 可以用来描述一组测试用例，it 可以用来描述单个测试用例。

  • expect ：用于进行断言。

  • mock ：用于模拟依赖关系并测试代码行为。

  • snapshot ：用于对组件快照进行测试。

快照测试

快照测试是 Jest 中比较有用的一个功能，它可以轻松地创建组件快照并在以后的测试中进行比较。通过快照测试，我们可以确保组件在各种情况下都表现正常。

下面是一个示例代码：

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

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

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

这里我们使用了 react-test-renderer 库来快照测试 MyComponent 组件，对比不同组件的快照来确保组件渲染的正确性。toMatchSnapshot 方法用于比较快照。

结论

使用 Enzyme 和 Jest 可以快速、易用地测试 React 应用程序。Enzyme 在测试组件时提供了多种 API，当然 Jest 自带的一些测试工具也非常好用。本文介绍了其中的基础用法和工具，但是基础知识只是开始，后续需要更多的实践和探索才能更好的掌握这两个工具。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/670100520bef792019b0166a

阅读全文

猜你喜欢

  • ES7 目前的新特性列表

    ES7 （ECMAScript 2016）是 JavaScript 的下一个版本，它已在 2016 年发布。与前代版本相比，ES7 引入了许多重要的特性和改进，使得编写和维护代码变得更加容易和高效。

    13 天前
  • Sequelize，Node.js 和 MySQL：基本查询

    前言 随着互联网时代的不断发展，Web 应用程序越来越复杂。前端技术框架如雨后春笋一般迅速发展，提供了更快速、简单、灵活、可复用的开发方式。为了满足复杂的业务需求，后端技术也需要不断向前发展，因为 W...

    14 天前
  • Serverless 架构：优点和缺点

    在构建 Web 应用程序时，Serverless 架构是一个越来越流行和引人注目的选择。由于它的优点和独特性，并且它的云供应商现在提供越来越多的Serverless服务。

    14 天前
  • 如何在 Deno 中实现自动部署

    在当今的软件开发环境中，自动化部署已经变得非常重要。通过自动化部署，可以加快软件的开发周期并确保产品的质量和稳定性。在本文中，我们将讨论如何在 Deno 中实现自动部署。

    14 天前
  • ES6增强了什么？开发者应该如何学习

    ES6是ECMAScript的第6个版本，全称为ECMAScript 2015。它是JavaScript语言的一次巨大升级，引入了许多新特性和语法糖，使得前端开发变得更加灵活、高效、易于维护。

    14 天前
  • 无障碍测试与修复技术

    前言 如今，随着科技的不断发展，我们的生活已经开始了数字化转型之路，同时也给了很多残障人士更多的机会融入这个数字化的世界。但是，由于网络产品设计和开发者的知识和资历不同，导致其无法在使用辅助技术辅助下...

    14 天前
  • ECMAScript2019 (ES10) 和 ES2020 (ES11) 的新功能详解

    自从JavaScript成为前端开发的主流技术后，一直在不断地更新和升级。ECMAScript是JavaScript的标准，而ES10和ES11是最新的版本，引入了一些新的功能和特性。

    14 天前
  • Mongoose 中使用 $pull 方法删除数组类型数据相关记录

    在 MongoDB 中，可以使用数组类型数据记录相关信息。在 Mongoose 中，可以使用 $pull 方法删除这些信息。本篇文章将详细介绍 $pull 方法的用法和示例代码，以帮助开发者更好地应用...

    14 天前
  • MongoDB 集群环境的搭建与维护

    简介 MongoDB 是目前非常流行的 NoSQL 数据库，在 web 开发和大数据领域应用广泛。在大数据和高并发的情况下，为了保证数据安全和可用性，我们需要搭建 MongoDB 集群环境。

    14 天前
  • 响应式设计中的清除浮动问题及方案

    在进行响应式设计时，通常都会遇到浮动元素引起的问题。在使用浮动元素时，需要注意浮动元素的位置和大小，否则页面布局可能会出现混乱的情况。为了避免这种情况，我们需要在浮动元素后面加上清除浮动。

    14 天前
  • Docker 容器中如何安装 PostgreSQL？

    前言 在前端开发过程中，我们经常需要使用到各种数据库，比如 PostgreSQL。而在使用 Docker 搭建开发环境时，我们需要在容器中安装 PostgreSQL。

    14 天前
  • 为什么选择 Serverless 架构？

    随着云计算的发展，越来越多的企业开始关注 Serverless 架构。Serverless 架构是一种全新的应用架构模型，具有许多优点，如可扩展性、高可用性、低成本等。

    14 天前
  • 使用 TypeScript 编写 RESTful API 时遇到的坑和解决方案

    在开发 RESTful API 的过程中，使用 TypeScript 可以大大提高代码的可读性、可维护性和健壮性。但是，我们也会遇到一些坑点。在本文中，我们将分享一些在编写 TypeScript 中 ...

    14 天前
  • Cypress 测试 React 应用时如何模拟异步数据

    在前端开发的过程中，我们经常会遇到需要模拟异步数据来测试页面展示的情况。针对 React 应用，Cypress 提供了多种方法来模拟异步数据，使得我们的测试能够更加健壮可靠。

    14 天前
  • 如何使用 ES12 的 for-await-of 来处理异步 Iterable

    随着前端应用变得越来越复杂，异步编程（asynchronous programming）已成为非常重要的一部分，但在使用 Promise、async/await 等异步编程技术时也会遇到一些问题，例如...

    14 天前
  • 如何在 CSS Flexbox 布局中实现图文混排

    CSS Flexbox 布局是一种流行的前端布局技术，可以轻易地实现自适应、可伸缩的布局，同时也支持图文混排。本文将详细介绍如何在 Flexbox 布局中实现图文混排，并提供示例代码和实践指导，帮助读...

    14 天前
  • 无障碍演示技巧

    随着互联网的不断发展和普及，越来越多的人使用互联网进行学习、娱乐和工作等。但是有一类人群却面临着障碍，他们是视觉障碍者、听觉障碍者以及行动障碍者等。为了让我们的网站和应用更具包容性，我们需要考虑到障碍...

    14 天前
  • 如何在 Jest 测试中模拟简单重定向

    当开发一个前端应用时，我们需要经常测试我们的代码。针对每个组件和功能进行测试可以帮助我们确保应用程序正常工作，并且随时可以检测到和修复错误。在现代的前端应用程序中，我们通常使用 Jest 作为我们的测...

    14 天前
  • 经验分享：如何在 Webpack 中构建 Web Components？

    Web Components 是一种浏览器的原生组件，有着许多优秀的特性，包括封装、复用、解耦等。在现今的 Web 开发中越来越受到开发者们的关注和使用。 Webpack 作为前端领域最受欢迎的模块打...

    14 天前
  • 如何使用 JProfiler 进行 Java 程序性能分析与调优

    随着Web应用程序越来越复杂和庞大，优化程序的性能变得日益重要。 JProfiler是一款功能强大的Java性能分析器，可以帮助您找出性能问题，并提供有用的信息来改进您的代码。

    14 天前

相关推荐

    暂无文章