Enzyme 详细使用手册：在 React 项目中进行组件测试

在 React 项目中进行组件测试是前端开发中很重要的一环。而 Enzyme 是目前 React 生态中使用最为广泛的测试库之一，它提供了强大而易用的 API，能够让我们轻松地模拟 React 组件的渲染和交互，以及断言组件的输出结果。本文将详细介绍 Enzyme 的使用方法，包括安装、配置和各种 API 的使用。

安装和配置

在使用 Enzyme 之前，我们需要先安装它。在项目中使用 npm 或 yarn 进行安装：

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

或者

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

其中，enzyme 是主要的 Enzyme 库，enzyme-adapter-react-16 是 React 16 的适配器，如果你的项目使用的是其他版本的 React，可以选择相应的适配器。安装完成后，在项目中的测试文件中引入 Enzyme：

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

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

其中，我们通过 configure 方法配置了 Enzyme 使用 React 16 的适配器。

Shallow Rendering

Shallow Rendering 是 Enzyme 中最常用的渲染方式，它可以让我们只渲染当前组件，不渲染它的子组件。这样可以提高测试效率，同时也能够保证测试的精准度。使用 Shallow Rendering，我们可以轻松获取组件的 HTML 结构，以及断言组件的输出结果。

首先，让我们来看一个简单的组件：

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

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

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

这个组件接受 title 和 content 两个 props，分别渲染为一个标题和一段内容。接下来，我们可以使用 Enzyme 的 shallow 方法来渲染这个组件，并获取它的 HTML 结构：

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

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

在测试用例中，我们使用 shallow 方法渲染了这个组件，并传入了相应的 props。然后，我们通过 html 方法获取了组件渲染后的 HTML 结构，并使用 Jest 的 toMatchSnapshot 方法对其进行快照测试。如果组件的输出结果与之前的快照不一致，测试将会失败。

Full DOM Rendering

如果我们需要测试组件的交互行为，比如点击按钮后是否能够正确地更新状态或触发其他事件，那么就需要使用 Full DOM Rendering。这种渲染方式会将组件及其子组件完全渲染出来，可以进行真实的交互测试。不过需要注意的是，Full DOM Rendering 的效率比 Shallow Rendering 更低，建议在必要时才使用。

下面是一个需要进行交互测试的组件：

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

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

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

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

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

这个组件有一个按钮，每次点击后都会将计数器加一并更新显示。为了测试按钮的点击行为，我们需要使用 Full DOM Rendering，并模拟点击事件。

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

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

在测试用例中，我们使用 mount 方法渲染了这个组件，并断言了初始的显示结果。然后，我们使用 Enzyme 的 find 方法找到了按钮和计数器元素，并通过 simulate 方法模拟了点击事件。最后，我们再次查找计数器元素，并断言它的显示结果是否正确。

其他 API

除了上面介绍的 shallow 和 mount 方法，Enzyme 还提供了其他一些有用的 API，如 render 方法、setState 方法、instance 方法等等。这些 API 可以让我们更加灵活地进行组件测试。

例如，我们可以使用 render 方法获取组件的静态 HTML 结构，但不进行任何交互测试：

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

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

我们也可以使用 setState 方法手动更新组件的状态，并断言组件更新后的输出结果：

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

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

另外，我们还可以使用 instance 方法获取组件的实例，在测试中直接调用组件内部的方法或属性：

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

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

总结

Enzyme 是 React 生态中一款强大而易用的测试库，通过 Shallow Rendering 和 Full DOM Rendering 等不同的渲染方式，可以让我们轻松地对组件进行测试。另外，Enzyme 还提供了丰富的 API，可以满足不同的测试需求。

当然，测试只能检查代码是否符合预期，不能完全消除 bug 的出现。但是，测试可以最大程度地提高代码的质量和可维护性，让我们更加自信地为项目贡献自己的力量。

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

阅读全文

猜你喜欢

  • Next.js 中如何使用 CSS Modules？

    在前端开发中，CSS Modules 是一个非常流行的技术，可以帮助我们更好地组织样式代码，避免命名冲突和样式污染。在 Next.js 中，使用 CSS Modules 也非常方便。

    9 个月前
  • Mongoose Date 类型时间戳陷阱与解决方式

    在使用 Mongoose 开发 Node.js 项目时，我们经常会使用 Date 类型来存储时间戳。但是，在使用过程中，我们可能会遇到一些令人困惑的问题。本文将介绍 Date 类型时间戳的陷阱以及解决...

    9 个月前
  • TailwindCSS 教程：为什么需要配置 Webpack？

    TailwindCSS 是一种流行的 CSS 框架，它提供了许多工具和类帮助我们快速构建现代化的网站界面。TailwindCSS 可以轻松定制，在不同的项目中灵活适配。

    9 个月前
  • Docker 部署 Rails 应用指南

    作为一名前端工程师，我们经常需要部署应用程序。Docker 作为目前最流行的容器化解决方案，能够为应用程序提供更高效、安全、可靠的部署方式。在这篇文章中，我们将重点介绍如何使用 Docker 来部署 ...

    9 个月前
  • ES12 中引入的新 Number BigInt 型函数：引入 Pow()、Mod()、Sqrt()

    在 ES12 版本中，引入了一种新的数据类型：BigInt。相较于 Number 类型，BigInt 类型的数值范围更大，可以处理远超 JavaScript 数值精度范围的计算。

    9 个月前
  • 使用 Chai 进行 API 测试时如何处理不稳定的测试数据

    使用 Chai 进行 API 测试时如何处理不稳定的测试数据 在进行 API 测试的过程中，我们可能会遇到一些不稳定的测试数据。这些数据可能会因为各种原因而发生变化，例如某个接口返回的数据结构有所改变...

    9 个月前
  • Kubernetes 中的异地多活方案设计

    在分布式系统中，异地多活 (geo-replication) 是一项非常重要的技术，它可以将数据在多个地理位置进行备份和同步，以避免单点故障和服务中断。Kubernetes 作为一种容器编排引擎，也需...

    9 个月前
  • ES11 中使用 Optional Chaining Operator 解决深层次属性引用问题

    在前端开发中，经常会遇到需要引用深层次属性（如嵌套对象或数组）的情况，而在访问嵌套属性时，如果中间的属性为空或未定义，就会出现“Cannot read property XXX of undefine...

    9 个月前
  • 理解 Koa 中的 ctx 对象

    Koa 是一个底层极简高效的 Node.js Web 框架，被广泛应用于前端类的 Web 开发中。在 Koa 应用程序中，ctx 对象是一个很关键的概念。本文将深入介绍 Koa 中 ctx 对象的含义...

    9 个月前
  • 使用 ES10 新增 BigInt 类型进行分布式集群高精度计算

    一、背景 在分布式集群计算、数据安全等领域，需要进行大整数运算，这时候就需要进行高精度计算。在 JavaScript 中，原生的 Number 类型为双精度浮点数（double precision f...

    9 个月前
  • GraphQL 错误处理：如何构建反应形式的 API

    GraphQL 是一个强大、灵活的 API 查询语言，提供了与旧式 REST API 相比更好的查询控制和数据组合。然而，当您的应用程序在处理 GraphQL 具体的查询时，您可能会遇到一些错误。

    9 个月前
  • Jest 如何 mock 掉子模块中的函数？

    前言 在前端开发中，我们常常需要对一些外部依赖进行模拟，比如一些接口请求或者第三方库的逻辑。为了解决这个问题，我们经常会使用 Jest 来进行单元测试，并使用其提供的 mock 功能进行模拟。

    9 个月前
  • ECMAScript 2018（ES9）中的 Array.flat() 和 Array.flatMap() 方法

    概述 ECMAScript 2018（ES9）作为一门前端开发领域的重要语言规范，在出现之初就备受业界的关注和期待。其中新增的 Array.flat() 和 Array.flatMap() 方法尤其引...

    9 个月前
  • ES8 中的 Shared memory and atomics 在 Web Worker 中的应用

    在现代 Web 开发中，Web Worker 已经成为了不可或缺的一部分，用于在页面的主线程之外执行耗时的任务，从而提高应用程序的响应速度和性能。而 ES8 中新增的 Shared memory 和 ...

    9 个月前
  • 解决 Angular 中使用 $timeout 导致的性能问题

    在 Angular 中，我们通常使用 $timeout 服务来延迟执行某些操作。然而，如果不注意使用方式，$timeout 也会影响应用的性能。 $timeout 的工作原理 在 Angular 中，...

    9 个月前
  • 高级应用实例：React 16.6.0 版本自定义渲染器实现

    前言 在前端开发领域，React可以说是一个非常强大且普遍使用的工具。它通过使用组件化的思想，简化了前端开发流程，并且通过虚拟DOM的技术优化了渲染性能。而自定义渲染器，则是React 16.6.0版...

    9 个月前
  • 在 Jest 中使用 ESLint

    在 Jest 中使用 ESLint 前言 在前端开发过程中，保持代码的规范性和一致性非常重要，可以提高代码的可维护性和阅读性。ESLint 是一个非常流行的 JavaScript 代码规范检查工具，在...

    9 个月前
  • Server-sent 事件的优势及其在前端单页应用程序中使用的技巧

    引言 在单页应用程序（SPA）中，我们通常面临以下两个问题： 如何实时交互和更新数据？ 如何实现事件驱动的异步更新？ Server-sent 事件（SSE）是一项用于实现服务器端推送的技术，可以有...

    9 个月前
  • PM2 启动错误的解决方法 ——”Error: Cannot find module ‘npmlog’”

    简介： 我们都知道 PM2 是一个强大的 Node.js 应用程序管理器，在生产环境中使用非常广泛。但是，有些开发者在启动 PM2 时可能会遇到错误：“Error: Cannot find modul...

    9 个月前
  • 如何使用 Babel 实现模块化加载（AMD，CommonJS，ES6）

    在前端开发中，模块化是一个重要的话题。随着项目规模的增大，代码量也随之增加，模块化的需求也变得越来越迫切。常见的模块化规范有 AMD，CommonJS 和 ES6 等。

    9 个月前

相关推荐

    暂无文章