了解 Enzyme：降低 React 组件单元测试的难度

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

了解 Enzyme：降低 React 组件单元测试的难度

React 组件单元测试在前端开发中扮演了极为重要的角色，但却常常被忽视。而 Enzyme，一个由 AirBnb 开源的 React 组件测试工具，可以让组件的测试更为简单和方便。本文将介绍 Enzyme 的基本用法，希望能够降低大家在 React 组件单元测试中的难度。

为什么使用 Enzyme

Enzyme 是一个针对 React 组件的 JavaScript 测试工具库，它使得组件的单元测试变得更容易、更具可读性和更加强大。使用 Enzyme 可以做到以下几点：

  • 简化组件层级分析
  • 使用适当的测试方式来处理 React 组件
  • 方便地搜索和遍历组件
  • 更方便地模拟用户行为
  • 适用于所有主要渲染器（例如，React DOM 和 React Native）

因此，使用 Enzyme 可以大大降低 React 组件单元测试的难度和复杂性。

安装 Enzyme

在开始之前，我们需要安装 Enzyme。这可以通过在终端中运行以下命令来实现： 

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

这个命令会安装 Enzyme 的核心库 enzyme 以及它所依赖的工具库 react-test-renderer 和 enzyme-adapter-react-16。我们需要安装正确版本的适配器，以便与我们正在使用的 React 版本兼容。上面的命令安装的是 React 16 的适配器。

基本用法

安装完成后，让我们使用 Enzyme 来测试一个简单的 React 组件： 

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

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

我们可以编写一个测试文件 button.test.js，然后在其中编写以下代码： 

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

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

在上面的代码中，我们首先导入了 React 和 shallow 函数（其中 shallow 函数是由 Enzyme 提供的一种测试方法，其可以快速渲染组件到虚拟DOM中）。然后我们编写了一个测试套件，其中包含了一个测试用例。这个测试用例会渲染一个简单的 Button 组件，为其传递一些属性，如 label 和 onClick。

用 shallow 函数渲染之后，我们通过 toMatchSnapshot 来比较渲染的结果是否与我们的预期相符。如果相符，则测试通过；否则就会失败。

在终端中，我们可以通过运行以下命令来运行这个测试文件： 

--- --- ----

这个命令会读取我们项目目录下的所有测试文件，并显示它们的运行结果。

测试子组件

有时候，我们需要测试一个组件的子组件。可以使用 Enzyme 提供的 find 和 prop 方法。举个例子，我们有一个包含了一个 Button 组件的 Counter 组件，如下所示： 

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

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

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

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

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

我们可以用下面的代码，测试 Counter 组件是否正确： 

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

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

在上面的代码中，我们首先导入了 React 和 shallow 函数，以及我们要测试的 Counter 组件。然后，我们声明了一个变量 wrapper，它存放了我们使用 shallow 函数渲染出来的 Counter 组件。

接着，我们编写了四个测试用例。第一个测试用例确保 Counter 组件有且只有一个包含在 div 标签中。第二个测试用例确保 Counter 组件有且只有一个包含在 span 标签中。第三个测试用例检查 Button 组件是否存在，最后一个测试用例检查 Button 组件是否有一个正确的 label 属性。

模拟用户行为

模拟用户行为在 React 组件测试中十分重要。Enzyme 提供了丰富的 API 来模拟用户在组件上的事件操作。我们可以使用 simulate 方法来触发这些事件。

在下面的代码中，我们将使用 simulate 方法来测试点击 Button 组件时状态是否正确更新了： 

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

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

在上面的测试用例中，我们首先断言了 span 元素的文本内容是否为 0。然后，我们使用 simulate 方法来模拟一个点击 Button 组件的操作。最后，我们再次断言 span 元素的文本内容是否为 1，以确保状态已正确更新。

结论

Enzyme 是一个强大的 React 组件测试工具，它可以使得组件的单元测试更为简单、容易和强大。它可以简化组件层级分析，使用适当的测试方式来处理 React 组件，方便地搜索和遍历组件，更方便地模拟用户行为，并适用于所有主要渲染器。希望这篇文章能够对你在 React 组件单元测试中使用 Enzyme 有所帮助。

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

阅读全文

猜你喜欢

  • RESTful API 中的 URL 版本控制

    RESTful API 是现代 Web 应用程序的基础。在开发过程中，经常需要对 API 进行更新。通常情况下，我们需要使用版本控制来保持 API 的稳定性并降低开发的复杂度。

    8 天前
  • 在 Next.js 项目中添加 Google reCAPTCHA 的详细步骤

    随着网络攻击愈发普遍，网站需要提高安全性以保护用户隐私和数据安全。为此，添加 Google reCAPTCHA 是实现防止机器人滥用网站的有效方法。如果您正在使用 Next.js，那么在添加 Goog...

    8 天前
  • Custom Elements 中自定义事件的传参方式详解

    在前端开发中，我们经常需要自定义事件来完成特定的业务逻辑。Web Components 是一种创建自定义元素和使用它们的新技术，它提供了 Custom Elements API，使得我们可以创建自定义...

    8 天前
  • Cypress 自动化测试中如何处理 canvas 元素

    在前端开发中，处理 canvas 元素的需求是非常常见的。然而，如何在自动化测试中处理 canvas 元素却是一个较为复杂的问题。 本文将会介绍如何在 Cypress 自动化测试中处理 canvas ...

    8 天前
  • 如何优化 MySQL 性能：从数据结构到 SQL 语句

    前言 MySQL 是目前在 Web 开发中最为流行的数据库之一，但是在高并发情况下，MySQL 数据库的性能会出现瓶颈，影响网站的访问速度和用户体验。因此，优化 MySQL 数据库的性能至关重要。

    8 天前
  • 利用 Headless CMS 构建智能化内容管理系统

    在现代 Web 应用程序开发中，内容管理系统 (CMS) 是至关重要的一环。Headless CMS 是一种最近出现的 CMS 类型，它提供了无关页面渲染的 API，这使得开发人员能够使用任何语言或框...

    8 天前
  • GraphQL 中的数据运算技巧及最佳实践

    GraphQL 是一种用于 API 的查询语言和运行时环境。它允许客户端定义所需的数据结构，而不是由服务器定义。在 GraphQL 中，客户端可以精确地请求所需的数据，减少了数据传输量和网络请求次数。

    8 天前
  • 如何使用 Enzyme 对 React 组件进行快照测试

    在前端开发过程中，React 组件的快照测试非常重要。快照测试可以让我们轻松地检查组件是否发生了意外变化，以及追查引起变化的原因。在 React 开发中，使用 Enzyme 是一种常见的组件测试工具，...

    8 天前
  • AngularJS 中解决单页应用程序中的资源缓存问题

    问题背景 在开发单页应用程序（Single Page Application，SPA）时，通常会使用 AngularJS 这样的前端框架。SPA 中有很多静态资源，如 HTML、CSS、JavaScr...

    8 天前
  • 如何在 Gatsby 项目中使用 Tailwind

    随着前端技术的快速发展，现代化的工具和框架层出不穷，吸引了越来越多的开发者的关注。Gatsby 和 Tailwind CSS 也是其中比较流行的组合之一。本文将介绍如何在 Gatsby 中快速集成 T...

    8 天前
  • 在 Express.js 中使用 Stylus

    前言 在现代的 Web 开发中，CSS 已经成为了一门必不可少的技术。但是，手写样式表可以很快变得混乱不堪，特别是当样式表的规模变得越来越大时。因此，一种新的高效的样式表语言 - Stylus，应运而...

    8 天前
  • SASS 中如何编写自定义函数

    简介 SASS 是一种 CSS 预处理器，它增加了原生 CSS 所不具有的一些功能，例如：嵌套、变量、Mixin、继承等。但是有时候，我们会发现 SASS 自带的函数无法满足我们的需求，这时候就需要编...

    8 天前
  • 在 Next.js 中使用 React Hook Form 进行表单验证和处理

    React Hook Form 是一个轻量级的库，用于处理表单验证和处理。它使用 React Hooks，使得它更加容易集成到应用程序中。在这篇文章中，我们将学习如何在 Next.js 中使用 Rea...

    8 天前
  • Docker 部署静态网站：从设置 Nginx 服务器到部署 HTML 文件

    随着互联网的不断发展和普及，静态网站已经成为了网络世界的重要组成部分。在开发和部署静态网站过程中，Docker 已经成为了越来越多的前端开发者的首选。本文将详细介绍如何使用 Docker 部署静态网站...

    8 天前
  • 如何使用 ESLint 自定义 React Hooks 校验规则

    React Hooks 是 React 16.8 版本新增加的特性，可以在不使用类组件的情况下，将状态逻辑的复用封装为独立的函数，使得组件的代码变得更加简洁和易于理解。

    8 天前
  • 如何在 LESS 中使用 @mixin 实现多次使用的样式

    LESS 是一种基于 CSS 语言增强的预处理器，它提供了许多方便的语法和能力来协助我们编写样式。其中一个强大的功能是使用 @mixin 可以实现一个样式的复用，减少代码冗余和维护成本。

    8 天前
  • Redis 中如何实现数据分片？

    前言 在大型应用系统中，单一 Redis 实例所能够承载的数据量和并发请求数，很容易到达瓶颈，影响系统的性能。为了解决这个问题，可以采取数据分片的思路，将 Redis 数据库分成多个部分存储在不同的 ...

    8 天前
  • Vue.js 中 computed 和 watch 的区别及应用场景

    引言 Vue.js 是一个流行的前端框架，它提供了多种方式来处理数据。其中，computed 和 watch 是两种常用的技术，它们都可以用于监视数据变化并作出响应。

    8 天前
  • 如何应对 Headless CMS 中的安全隐患

    随着头部 CMS（如 WordPress）以及客户端（尤其是 JavaScript 框架）的之间渐进式的分离，Headless CMS 的使用逐渐普及。Headless CMS 允许开发人员使用任何前...

    8 天前
  • 使用 Deno 和 Steam API 获取游戏数据

    最近，随着 Deno 的推出，前端工程师们可以更加轻松地使用 JavaScript 来构建后端应用程序。本文将介绍如何使用 Deno 和 Steam API 获取游戏数据，并提供示例代码。

    8 天前

相关推荐

    暂无文章