Enzyme 教程：React 测试框架入门指南

AI 编程助手，豆包旗下的编程助手，提供智能补全、智能预测、智能问答等能力，节省开发时间，释放脑海中的创造力，支持 VSCode，点击体验 AI

简介

在前端开发中，如何保证代码的质量和稳定性一直是一个重要的问题。而在 React 开发中，我们可以通过使用测试来解决这个问题。Enzyme 就是一个非常好用的 React 测试框架，可以帮助我们快捷地编写测试代码，提升项目的可维护性和稳定性。

本文将带你入门 Enzyme，让你能够使用它对 React 组件进行测试。我们会从安装 Enzyme 开始，然后介绍其常用的 API 和使用方法。

安装

安装 Enzyme 很简单，使用 npm 即可：

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

其中，enzyme-adapter-react-16 是 Enzyme 针对 React 16 的适配器，如果你的 React 版本不同，需要安装相应版本的适配器。

API

Enzyme 提供了三个级别的 API：

  • Shallow：浅渲染，只渲染当前组件，不渲染子组件；
  • Mount：完全渲染，渲染当前组件和所有子组件；
  • Render：静态渲染，只渲染组件的 HTML。

接下来我们会分别介绍这三个级别的 API。

Shallow API

Shallow API 只渲染当前组件，不渲染子组件。这种渲染方式可以提高测试性能，同时也可以隔离当前组件与子组件的影响。

使用 shallow 方法可以创建一个 ShallowWrapper 对象，我们可以通过这个对象来操作渲染出的组件。

例如，我们有一个名为 Button 的组件：

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

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

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

我们可以使用 shallow 方法来测试：

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

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

In the above example, we create a shallow wrapper of our Button component using the shallow method. Then we check if the component exists by calling the exists method of the wrapper.

在上面的例子中，我们使用 shallow 方法创建了一个 Button 组件的浅渲染对象 wrapper。然后我们通过调用 wrapper 的 exists 方法来判断组件是否存在。

Mount API

Mount API 会完全渲染当前组件及其子组件。这种渲染方式可以更全面地测试组件，包括其子组件的交互、渲染行为等。

使用 mount 方法可以创建一个 ReactWrapper 对象，我们可以通过这个对象来操作渲染出的组件。

例如，我们有一个名为 App 的顶层组件，它包含一个 Button 组件：

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

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

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

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

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

我们可以使用 mount 方法来测试：

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

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

在上面的例子中，我们使用 mount 方法创建了一个 App 组件的完全渲染对象 wrapper。然后我们找到 Button 组件的 button 元素，模拟点击事件，再次查找数量变化后的 p 元素。

注意，mount 方法会创建一个完整的渲染树，测试性能相对较慢，如果只需要测试当前组件，则推荐使用 shallow 方法。

Render API

Render API 会静态渲染组件，生成组件的 HTML，但不会返回 React 组件实例。这种渲染方式可以测试组件是否按照预期生成 HTML 标记。

使用 render 方法可以创建一个 CheerioWrapper 对象，我们可以通过这个对象来操作渲染出的 HTML。

例如，我们有一个名为 ListItem 的组件：

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

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

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

我们可以使用 render 方法来测试：

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

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

在上面的例子中，我们使用 render 方法创建了一个 ListItem 组件的静态渲染对象 wrapper。然后我们断言生成的 HTML 是否符合预期。

使用方法

在介绍 Enzyme 的使用方法之前，我们需要了解 React 组件的测试分为两种类型：

  • 单元测试：测试组件是否渲染正确，是否正确响应用户事件等；
  • 集成测试：测试组件之间的互动是否正常，通过模拟用户事件来测试整个应用是否能正常工作。

根据测试类型的不同，我们可以使用不同的渲染方法和断言。下面我们会分别介绍这两种测试的使用方法。

单元测试

单元测试是针对单个组件的测试，测试的重点在于组件本身的渲染和行为。在 Enzyme 中，我们可以使用 shallow 和 mount 方法来进行单元测试。在断言方面，我们可以使用 expect 来断言组件的状态和行为是否符合预期。

例如，我们有一个简单的计数器组件：

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

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

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

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

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

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

我们可以使用 shallow 方法来测试它的渲染和行为：

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

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

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

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

在上面的例子中，我们使用 shallow 方法创建了一个 Counter 组件的浅渲染对象 wrapper。然后我们断言组件是否符合预期，例如 Count 是否显示为 0，按钮数量是否为 2 等。

我们可以通过 wrapper.find(selector) 来查找组件中的元素，通过 wrapper.simulate(event[, mock]) 来模拟触发事件。在触发事件后，我们再次断言组件状态是否符合预期。

集成测试

集成测试是针对整个应用的测试，测试的重点在于多个组件之间的交互和状态。在 Enzyme 中，我们可以使用 mount 方法来进行集成测试。在断言方面，我们可以使用 expect 来断言组件的行为是否符合预期。

例如，我们有一个 TodoList 应用，它包含一个 AddTodo 组件和一个 TodoList 组件：

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

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

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

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

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

我们可以使用 mount 方法来测试它的渲染和行为：

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

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

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

在上面的例子中，我们使用 mount 方法创建了一个 TodoListApp 组件的完全渲染对象 wrapper。然后我们断言组件是否符合预期，例如 AddTodo 组件是否存在，TodoList 是否存在等。

我们可以通过 wrapper.find(selector) 来查找组件中的元素，通过 wrapper.simulate(event[, mock]) 来模拟触发事件。在触发事件后，我们再次断言组件状态是否符合预期。

结论

Enzyme 是一个功能强大、易于使用的 React 测试框架。在使用 Enzyme 进行测试时，我们需要区分单元测试和集成测试，然后根据不同测试场景选择适合的 API 进行测试。我们还可以使用丰富的断言库来断言组件状态和行为是否符合预期。

在进行测试时，我们可以通过测试用例来捕获代码的行为，以确保代码的质量和稳定性。同时也可以提高程序猿对代码理解的深度，加深对组件功能和使用方法的理解。

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

阅读全文

猜你喜欢

  • Web Components 自定义事件及事件触发方式

    介绍 Web Components 是当今前端领域的一个热门话题，其通过对一系列特性的结合，使得用户可以自定义 HTML 元素，进而实现组件化设计。组件化设计在提高代码复用性、降低维护成本等方面有着显...

    15 天前
  • 如何在 Promise.all 中处理并发请求

    如何在 Promise.all 中处理并发请求 在前端开发中，我们经常需要发送多个请求。而在这些请求中，有些请求需要排队等待上一个请求的返回结果，而有些请求则可以并行执行，即不需要等待上一次请求的结果...

    15 天前
  • SASS 的灵活性和适用性介绍

    SASS（Syntactically Awesome Style Sheets）是一个基于 CSS 的预处理器，通过扩展 CSS 语言提供了更多的功能和灵活性。SASS 很流行，因为它可以大大提升前端...

    15 天前
  • 如何在 Webpack 中与 Jest 整合

    如何在 Webpack 中与 Jest 整合 Webpack 是一个现代化的前端打包工具，其中包含了许多插件和配置选项，可用于优化和自定义开发体验。而 Jest 则是一个流行的 JavaScript ...

    15 天前
  • 让一切都变得更美好——无障碍服务

    在现代社会中，随着技术的发展和普及，人们越来越依赖电子设备。但是，我们也不应该忘记一部分用户——残障人士。为了让残障人士也能够享受到与其他人一样的权益，我们需要为他们提供无障碍的服务，这是每个优秀开发...

    15 天前
  • React+webpack 构建大型 SPA 项目的优化实践

    React+webpack 是一种非常流行的技术组合，被广泛地应用于构建大型单页面应用程序 (SPA)。尽管这个技术组合很强大，但是在面对大规模项目时，它可能会变得比较缓慢。

    15 天前
  • 在 Hapi 和 React 中使用 Redux 解决状态管理问题

    在 Hapi 和 React 中使用 Redux 解决状态管理问题 在前端开发中，状态管理是一个常见的问题。一些小规模的应用中，状态管理可能很简单，但随着应用规模的增长，状态管理变得更加复杂。

    15 天前
  • 通过 Headless CMS 优化你的博客 SEO

    随着互联网时代的到来，越来越多的个人和企业开始拥有自己的博客网站，用于发表自己的意见和经验，吸引更多的读者和客户。但是，博客上线后，并不是所有的人都能够完成良好的 SEO 排名。

    15 天前
  • 新特性详解：ECMAScript 2019 (ES10) 中的 Array() 构造函数

    此次的 ECMAScript 2019（ES10）为开发者带来了很多新的特性，其中 Array() 构造函数在这次更新中进行了一些改动。本篇文章将详细介绍这些变化，提供了解这个新特性的深度和学习以及指...

    15 天前
  • 使用 Chai 测试 React 组件的正确姿势

    在前端开发中，测试是不可或缺的一环。而使用 Chai 进行测试，可以让我们更加方便、灵活地编写测试代码。下面我们将讲述如何使用 Chai 测试 React 组件的正确姿势。

    15 天前
  • 解决 Angular 中 ng-src 指定图片路径无法显示的问题

    在 Angular 中，我们可以使用 ng-src 指令来指定图片的路径，以便在页面中显示相应的图片。然而，在使用 ng-src 指定图片路径时，有时候我们可能会遇到图片无法显示的问题。

    15 天前
  • MongoDB 的最佳配置：如何减少驱动器使用并提高性能？

    介绍 MongoDB 是当今最受欢迎的 NoSQL 数据库之一，它具有广泛的应用范围，尤其适合于处理大量的非结构化数据。设计良好的 MongoDB 部署可以处理海量数据，提供高性能和高可用性。

    15 天前
  • Fastify 与 GraphQL 结合使用完整教程

    前言 Fastify 是一个低开销、高性能的 Node.js Web 框架。它以其快速的 HTTP 解析器和路由速度而闻名，并且具有可扩展的插件架构。GraphQL 是一种新兴的 API 查询语言和运...

    15 天前
  • GraphQL 的查询优化及降噪的处理方式

    GraphQL 的查询优化及降噪的处理方式 GraphQL 是一种开放源代码的数据查询和操作语言，由 Facebook 开发。它旨在提供一种更高效、更强大、更灵活的数据查询语言，可以大大提高前端工程师...

    15 天前
  • 如何在 Flexbox 布局下实现内容换行的实现

    Flexbox 布局是现代前端开发中常用的布局方式之一，它提供了一种强大的基于网格系统的布局方案，灵活性非常高。但是在使用 Flexbox 布局的过程中，我们可能会遇到一些内容过长导致换行不正常的问题...

    15 天前
  • Deno 中使用 WebAssembly 的方法

    什么是 WebAssembly？ WebAssembly 是一种低级的类汇编语言，可以在浏览器或其他运行时环境中运行，它可以与 JavaScript 一起使用，使我们能够以接近本地的速度来运行复杂的计...

    15 天前
  • 使用 Hapi.js 和 Scrapoxy 构建 Web 爬虫

    作为一名前端开发者，我们经常需要从网站上获取数据以便进行数据分析、数据可视化等任务。这时就需要用到爬虫技术。 在爬虫的开发过程中，我们常常面临一些挑战，比如反爬虫策略、异步网站数据的获取等问题。

    15 天前
  • Headless CMS：一项新的 CMS 发展趋势

    前言 传统的内容管理系统（CMS）通常将内容管理和内容展示捆绑在一起，这对于许多网站来说是一个好的选择。然而，对于一些网站而言，这种方法可能会成为一种限制。 例如，一些需要大量定制内容的网站（如电子商...

    15 天前
  • Cypress：一种全新的 JavaScript E2E 测试框架

    什么是 Cypress？ Cypress 是一种由 JavaScript 编写的端到端（End-to-End，E2E）测试框架， 它用于编写、运行和调试测试，而无需额外的配置或安装其他库或测试工具。

    15 天前
  • Chai 如何判断两个对象相等？

    Chai 如何判断两个对象相等？ 简介 Chai 是一个用于编写断言库的 JavaScript 库，它允许您准确地测试您的代码是否按照期望的方式工作。Chai 提供了丰富的语言和插件，以便于您编写更清...

    15 天前

相关推荐

    暂无文章