在前端开发中，React Hooks 是一种非常流行的编写组件逻辑的方式，它们能够提供一个简单和更好的方式去管理状态和交互。随着 React Hooks 的日益流行，有必要编写一些测试来确保代码的质量和稳定性。目前最主流的 React 测试工具框架是 Enzyme，因此本文将介绍如何使用 Enzyme 测试 React Hooks 的最佳实践。
关于 Enzyme
Enzyme 是由 Airbnb 开发的 React 测试工具框架，它提供了一个友好的 API 来测试 React 组件的输出。它支持 3 种渲染方式：mount、shallow、render。其中 mount 是真实渲染，也叫深度渲染，shallow 是浅渲染，render 是静态渲染。
在本文中，我们将使用 mount 来进行渲染，因为 mount 的优势在于它会渲染组件的所有子组件，并返回它们在树中的位置。这些数据可以帮助测试人员更好地了解组件的输出和交互。
准备工作
在开始我们的实践之前，我们需要先确保我们的开发环境中已经安装了 Enzyme 和它所依赖的 React Adapter。在这里我们选择 React 17 作为适配器。
--- ------- ---------- ------ -----------------------
接下来，创建 src/setupEnzyme.js 文件，初始化 Enzyme，并使用 React 适配器。
------ - --------- - ---- --------- ------ ------- ---- ------------------------------------- ----------- -------- --- --------- ---
最后在 Jest 配置中引入它：
-------------- - - ------------------- ------------------------- --
Hook 测试的结构和策略
Hooks 的测试策略会稍微有点不同。在使用 React 类组件时，我们可以通过 ref 直接实例化组件，以便进行测试。但是，使用 Hook 时，我们没有像 ref 那样可以访问组件实例的方式，因为它只是一个函数。所以，要测试 Hook，我们需要渲染一个包含 Hook 的组件，并在 Hook 挂载时断言。
------ - ----- - ---- ---------
------ ------------- ---- -----------------------
------------------------- -- -- -
---------- ------ ------- ------- -- -- -
----- ------- - ---------------------- ----
-----------------------------------------------------------------
---
---
-------- ----------------- -
----- ----------------- - ----------------
------ ---- ------------------------------------------------------------------
-在这个例子中，我们使用 mount 渲染 CustomComponent，当 CustomComponent 组件渲染时，useCustomHook 会被调用然后返回它应该返回的值。然后我们通过在 wrapper 中查找包含字符串 'trigger-custom-hook' 的元素来得到真实的 Hook 返回值。
示例代码
最后，我们来看一个示例，演示如何使用 Enzyme 测试 React Hooks 的最佳实践。本例子是一个简单的轮播图组件，它使用 useState 和 useEffect 实现。以下是 Hook 代码：
------ ------ - --------- ------- --------- - ---- --------
---
-
- ------ --- --- -----
- --------
--
------ ------- -------- ---------------- -------- -
----- ------------- --------------- - ------------
----- ---------- - -------------
----- - ----- - ---- - - --------
------------ -- -
----- ---- - -- -- -
-------------------------- -- ---------- - -- - --------------
--
------------------ - ---------------- -------
------ -- -- -
---------------------------------
--
-- ------- ---------------
------ ------------
-
在我们的测试中，我们将渲染包含轮播的组件，并确保它可以正常渲染和工作。
------ ----- ---- --------
------ - ----- - ---- ---------
------ --------- ---- ---------------------
--------------------- -- -- -
---------- ------ ----- -- ----- ---- -- -- -
---------------------
----- ------- - ------------- ----
-------------------------------------------------------------------
-------------------------------
-----------------
--------------------------------------------------------------------
-------------------------------------------------------------------
-------------------------------
-----------------
--------------------------------------------------------------------
-------------------------------------------------------------------
---
---
-------- -------- -
----- ------ - -
----------------------------------------------------
----------------------------------------------------
--
----- ----------- - ------------------
------ -
-----
------------------- ------ -- -
----
-----------
----------------- ------- --- ----------- - -------- - -----
-
---- ----------- ---------------------- --
------
---
------
--
-如上所示，我们通过 jest.useFakeTimers（）模拟了需要等待时间，然后更新 wrapper 并断言不同的渲染状态来测试 Hook 的工作方式。
总结
从上述实践中我们可以总结出一些最佳实践：
- 在使用 Hooks 时，需要渲染 Hook 所在的组件。
- 通过选择 mount 来渲染并测试整个组件。
- 在测试之前需要准备好 Enzyme 函数和 React Adapter。
- 使用 Jest 的定时器 API 来测试延迟的 Hook。
希望使用本文后 Enzyme 测试 Hook 变得更轻松。这个过程可能比直接测试 Class Component 要繁琐一些，但在确保 Hooks 的正确性和性能中是必不可少的一步。在学习了如何测试 Hook 后，我们将更容易编写可维护的，具有高质量的组件。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64c4fc1283d39b488184628d