解决 Enzyme 在 React v16.4 中的一些问题

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

前言

Enzyme 是 React 测试工具库中的重要成员，它具备了形如 jQuery 的 API，使得 React 组件的测试变得更加简单和可读性更高。但是，随着 React 不断更新迭代，Enzyme 也遇到了一些针对 React v16.4 的问题。

本篇文章主要介绍了通过一些基本的调整和技巧，解决 Enzyme 在 React v16.4 中出现的一些问题的方法。

##问题描述

React v16.4 以前的版本中，虚拟 DOM 的渲染是同步的，但是在 React v16.4 之后，渲染虚拟 DOM 变成了异步的。这使得 Enzyme 在渲染 React 组件时出现了一些问题。

具体来说，主要体现在 Enzyme 的渲染和断言过程中。

渲染问题

在 React v16.4 中，Enzyme 中的 shallow() 和 mount() 函数中，虚拟 DOM 渲染变成了异步的。

这意味着，在 Enzyme 中，与 React 的生命周期函数一起工作的模拟时机就会发生变化。在这种情况下，这些模拟需要等待 React 执行完生命周期方法，才能在 Enzyme 中进行更进一步的断言。

例如，我们以一个简单的 React Axios 应用为例：

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

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

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

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

我们可以使用 shallow() 把 AxiosGet 组件浅渲染一下，然后根据状态及加载情况来进行断言：

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

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

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

该测试不会通过，因为在 Enzyme 进行断言之前，由于虚拟 DOM 的异步渲染，Axios 请求还未完成，组件还在等待返回。

断言问题

在 React v16.4 中，Enzyme 中的 setState() 函数也变成了异步的。这意味着，在 setState() 之后进行的断言可能会出现一些问题，因为在最后更新之前，断言会在组件更新之前触发。

例如，我们以一个非常简单的 React 组件为例：

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

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

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

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

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

我们使用 mount() 将组件装载到虚拟 DOM 中，并对其进行交互和断言：

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

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

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

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

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

我们会发现，这个测试不会通过，因为启动检查和 Enzyme 状态更新之间的时间差异。当我们模拟点击增量按钮时，执行了 setState()，而不是直接修改状态，所以断言错误地把旧状态与增量相加，而不是新状态。

解决方法

渲染问题

在工程项目中，我们可以尝试创建一个 async 函数。这个函数将会在传入了一个 React 组件的 Promise 上进行解析、解包和断言。将这个函数封装用到底层的 requestAnimationFrame 中，就可以使得每一次组件状态变化都能适当地等待。

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

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

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

现在我们可以使用这个 testAsyncComponent 函数来解决异步渲染测试的问题：

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

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

断言问题

在断言方案中，我们可以在组件 mount 后，通过组件实例对 setState() 进行修改。这将为 Enzyme 和 React 生命周期函数提供相同的上下文，使得它们同步化，从而解决了我们遇到的问题。

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

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

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

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

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

在这个示例中，我们使用了 mount()，因为它与 React 生命周期进行更紧密的集成。

结论

通过尝试针对 Enzyme 和 React v16.4 的不同工作方式进行微调或使用特殊技巧，可以解决许多 Enzyme 在渲染和断言时出现的问题。

使用 async 和 Enzyme 的 update() 函数结合使用，我们可以解决 Enzyme 中异步渲染的测试问题。同时，在断言状态更新方面，可以尝试直接修改实例的 state 状态，避免 Enzyme 状态更新之间的时间差异。

这些方法对 Enzyme 或 React 的工作方式不是理解，而是一个真正的经验问题。使用上述方法可以帮助开发者在 Enzyme 和 React v16.4 的情况下高效地构建和测试组件。

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

阅读全文

猜你喜欢

  • 运用 Custom Elements 探讨 Web Components 在企业级前端开发中的应用

    前言 随着 Web 技术的日益发展，企业级前端开发中越来越多地需要应对复杂性、可维护性和可复用性等挑战。目前市场上的前端框架很多，比如 Angular、React、Vue 等，它们各自有着很多优缺点。

    19 天前
  • PWA 中如何处理用户许可请求

    PWA 中如何处理用户许可请求 PWA（Progressive Web Application）是一种新型的 Web 应用程序，可以通过使用现代 Web 技术建立高效、响应式和可靠的应用程序。

    19 天前
  • 解决 Express.js 应用发生未捕获异常崩溃问题

    在 Express.js 应用开发过程中，经常会遇到应用因为未捕获异常而崩溃的问题。这样一来，应用所有正在处理的请求和响应都将被挂起，直到应用被重启。如果这种情况频繁发生，将对应用的可用性和稳定性产生...

    19 天前
  • ECMAScript 2018 中的可选链操作符解决 undefined 访问错误

    在 JavaScript 编码中，避免访问未定义的变量是一个常见的问题。通常，当我们试图访问一个未定义的变量或属性时，程序会抛出一个异常。这种错误非常容易发生，特别是在处理嵌套数据结构时。

    19 天前
  • RESTful API 中的 HATEOAS（Hypermedia as the Engine of Application State）详解

    在开发 Web 应用程序时，RESTful API 已经成为了 Web 应用程序开发的基础。RESTful API 可以用于构建可扩展的 Web 应用程序和服务，它使得不同的 Web 应用程序能够互相...

    19 天前
  • SASS vs. React：哪一个更好？

    在前端开发中，SASS和React都是非常流行的工具。SASS可以使CSS更加方便，而React则是一个强大的JavaScript库，可以帮助我们构建动态的用户界面。

    19 天前
  • 在 VSCode 中配置 ESLint + Prettier（超详细）

    随着前端开发迅猛发展，代码质量已经变得越来越重要。对于团队开发来说，我们希望代码在满足项目需求的同时，仍然保持统一、规范，易于维护。 这就是 ESLint 和 Prettier 的目的。

    19 天前
  • Jest 测试中断言 styles 的使用技巧

    在前端开发中，我们常常需要进行样式测试。这时候，Jest 是一个非常好用的测试框架，它提供了一系列的测试工具，包括断言工具，可以用来方便地编写测试代码。在这篇文章中，我们将讲解如何在 Jest 测试中...

    19 天前
  • 如何在 PWA 中实现自适应布局

    随着移动设备的普及，网页已经不再是只在桌面设备上浏览的东西，而是在不同尺寸、不同分辨率的设备上使用。这就需要我们为不同设备提供适配性的布局，即响应式设计。但是要在 PWA 中实现自适应布局，我们需要考...

    19 天前
  • Web Components 的开发与调试技巧

    Web Components 是一种前端开发技术，能够让你创建可重用的自定义 HTML 标签和元素。当这些元素需要在多个页面中重复使用时，Web Components 提供了一种优雅的解决方案。

    19 天前
  • 使用 Mocha 测试 React 组件的最佳实践

    在使用 React 构建应用程序时，测试是至关重要的一部分。Mocha 是一个流行的 JavaScript 测试框架，它可以用于测试 React 组件。在本文中，我们将介绍 Mocha 的最佳实践，以...

    19 天前
  • 高效的优化：JavaScript 性能的顶级实践

    JavaScript 是现代 Web 开发的基础之一，我们需要用它来实现复杂的交互逻辑和动态效果。但是，随着应用的复杂度和数据量的增加，JavaScript 性能问题也逐渐变得更加突出。

    19 天前
  • 用 GraphQL 时如何在后端对查询进行验证？

    GraphQL 是一个强类型的数据查询语言，通过定义查询和返回的类型来使得 API 更加精确和可预测。在前端开发过程中，我们常常会使用 GraphQL 来进行数据查询和操作。

    19 天前
  • 解决 IE 下 CSS Reset 引起的行间距问题

    随着现代浏览器的不断发展，前端开发人员通常会使用一些 CSS Reset 的库来消除不同浏览器之间的样式差异，例如 Normalize.css 和 Reset.css。

    19 天前
  • React 应用中的状态管理方案

    React 是一款流行的 JavaScript 库，用于构建用户界面。在 React 中，状态是非常重要的一部分。状态是组件内部数据的集合，反映了组件的视图。不同的组件可能拥有不同的状态，导致代码的复...

    19 天前
  • Redux 中的数据流控制及优化技巧

    1. 引言 Redux 是一个流行的状态管理工具，主要用于构建大型、复杂的前端应用程序。它的数据流程特点是单向的，也就是说，数据只能从顶层组件到底层组件流动。这种单向数据流有助于创建可预测的应用程序，...

    19 天前
  • 解决在 ECMAScript 2015 中的函数参数问题

    ECMAScript 2015（ES6）是一个重要的 JavaScript 版本，它带来了许多优秀的语言特性，比如箭头函数、let、const 和类等。在 ES6 中，函数参数也有了一些新的表现形式，...

    19 天前
  • Webpack 优化：减小构建后的 bundle 体积

    随着前端技术的不断发展，构建工具在前端开发中也扮演了极其重要的角色。其中，Webpack 不仅是目前最受欢迎的构建工具之一，同时它也是目前最强大的打包工具之一。然而，随着项目逐渐变得复杂，Webpac...

    19 天前
  • ES8 中新增的 String.prototype.padEnd() 方法详解

    在 ES8 中，新增了 String.prototype.padEnd() 方法，用于在字符串结尾部分填充指定的字符，以达到字符串长度的某一要求。该方法常常用在前端开发中的文本处理方面，使用该方法能够...

    19 天前
  • ES12 的 Object.fromEntries 方法大大简化对象的创建！

    ES12 中新增的 Object.fromEntries 方法，它是一个非常有用的对象创建工具。相比于传统的对象初始化方法，这个方法可以更加简洁、易于理解。本文将详细介绍使用 Object.fromE...

    19 天前

相关推荐

    暂无文章