使用 Enzyme 测试 React 高阶组件
React 是一个流行的 JavaScript 库，用于构建用户界面。它已经成为开发人员的优选之一，因为它以可组合性和高可读性而闻名。React 高阶组件是一个强大的工具，可以使代码更加可读和可维护。如果您正在使用 React 高阶组件，那么您可能需要测试它们。在本文中，我们将使用 Enzyme 讲述如何测试 React 高阶组件。
什么是 Enzyme？
Enzyme 是一个用于 React 应用程序的 JavaScript 测试实用程序库，它可以帮助您轻松管理和操纵 React 组件树的渲染输出。Enzyme 提供了三个 API 来创建虚拟 DOM 树：shallow、mount 和 render。Enzyme 对这些 API 做了一些调整，以确保更好地集成 React。
深入了解高阶组件
React 高阶组件（HOC）是一个函数，它接收一个组件并返回一个新组件。它通常用于包装常规组件，以添加一些功能，比如 redux 或 router。HOC 可以让您将逻辑从 UI 组件中提取出来并复用它。这种模式在 React 中非常流行，因为它可以提高代码的可复用性和可读性。
在实践中，您需要了解 HOC 的两个重要概念：props 和 context。props 是将数据从父组件传递给子组件的一种方式。Context 则使跨层级组件之间数据共享更加容易。
示例代码
现在让我们来看一个 React 高阶组件的示例代码。此代码使用 withTracker 函数将带有 Google Analytics 跟踪代码的传入组件包装：
------ ----- ---- --------
------ ------- ---- -----------
----- ----------- - ------------------ ------- - --- -- -
----- --------- - ------ -- -
-------------
-----
-----------
---
-----------------------
--
----- --- - ------- -- -
----- ---- - ------------------------
----------------
------ ----------------- ---------- ---
--
------ ----
--
------ ------- ------------该组件将导出一个接受 WrappedComponent 和 options 的函数。我们使用 ReactGA 库来进行页面跟踪，它接受一个 URL 作为参数。在 HOC 中，我们获取当前 URL 并使用 ReactGA 为该 URL 启动一个页面跟踪器。最后，我们将传递所有的 props 给 WrappedComponent。
测试高阶组件
测试高阶组件与测试常规组件类似，但是我们需要做一些特殊的事情来测试 WrappedComponent。在我们的示例代码中，我们将测试包含组件 HOC，而不是 WrappedComponent。
在本例中，我们将测试网站是否正确设置了 Google Analytics。我们可以使用 Jest 和 Enzyme 来编写测试用例。有了下面的代码，我们可以确保页面跟踪器被设置：
------ - ------- - ---- ---------
------ ----------- ---- ----------------
------ ------- ---- -----------
----- ------------- - -- -- -
------ ----------------------
--
----------------------- -- -- -
---------- ----- --- ---- ----- ------ ----------- -- -- -
----- ------------- - ------------------- ------------
----- -------- - ------------------- -------
----- ------- - -
------ -----
------ ----- ------
--
----- --- - -------------------------- ---------
------------ ----
-----------------------------------------
---------------------------------------
-----------
----- ------------------
---
----------------------------
-----------------------
---
---在上面的代码中，我们首先使用 shallow 浅渲染来渲染 HOC。我们使用 spyOn 函数将 ReactGA 的 pageview 和 set 方法存储为间谍函数。然后我们正常调用 HOC（这将触发 Google Analytics 跟踪事件）。最后，我们可以验证这两个间谍函数是否已被调用，以确保我们的高阶组件在应用程序中正确设置了 Google Analytics。
该测试用例还包括一个存根子组件 TestComponent，用于模拟 WrappedComponent。请注意，我们在测试用例中并没有使用它，但它仍然是必需的，因为我们必须将其传递给 withTracker 函数。
结论
React 高阶组件是 JavaScript 应用程序中一个非常有用的抽象层，它可以提高代码的可读性和可复用性。在使用高阶组件时，我们需要测试它们以确保它们以预期方式工作。在本文中，我们了解了如何使用 Enzyme 测试 React 高阶组件。我们看到了如何编写一个测试用例来确保高阶组件正确设置 Google Analytics 跟踪事件。希望这篇文章可以帮助你更好地理解如何测试高阶组件。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67111469ad1e889fe2fd7538