在前端开发中，测试是不可或缺的一个步骤，可以有效提高我们的代码质量和稳定性。React Hooks 是近年来 React 的一项重大更新，它们提供了一种更简便的编写组件逻辑的方式。然而，由于 Hooks 在实现上是依赖于闭包的，所以需要一些特殊的技巧才能进行单元测试。本文将介绍如何利用 Enzyme 和 Jest 进行 React Hooks 的单元测试，并分析 Hooks 单元测试的一些技巧。
Jest 和 Enzyme 的基本使用
在开始介绍测试 Hooks 的方法之前，首先需要了解 Jest 和 Enzyme 的基本使用。Jest 是一个由 Facebook 维护的 JavaScript 测试框架，其本身具有断言库和测试运行器，可以方便地进行单元测试。Enzyme 是一个 React 组件测试工具库，它提供了一系列方便的 API，使我们可以方便地操纵组件。
假设我们有如下 React 组件：
-- -------------------- ---- -------
------ ------ - -------- - ---- -------
------ ------- -------- --------- -
----- ------- --------- - -----------
------ -
-----
----------- -----------
------- ----------- -- -------------- - --------------
------- ----------- -- -------------- - --------------
------
-
-我们可以通过 Enzyme 来测试这个组件：
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------- - ---- --------
------ ------- ---- -----------
------------------- -- -- -
---------- ------ ------- ------- -- -- -
----- ------- - -------------------
-------------------------------------------------- ---
--
---------- --------- ------- ---- ----- ---- -------- -- -- -
----- ------- - -------------------
----------------------------------------------
-------------------------------------------------- ---
--
---------- --------- ------- ---- ----- ----- -------- -- -- -
----- ------- - -------------------
----------------------------------------------
-------------------------------------------------- ----
--
--在这个测试中，我们使用了 Enzyme 提供的 shallow 方法，将 Counter 组件浅渲染后返回一个 wrapper 对象，接着使用 wrapper.find 方法寻找某一个元素，使用 simulate 方法模拟用户事件操作。最后使用 Jest 提供的 expect 断言库进行验证。
如何测试 Hooks
在学习测试 Hooks 之前，我们需要先了解如何在组件中使用 Hooks。
-- -------------------- ---- -------
------ ------ - -------- - ---- -------
------ ------- -------- --------- -
----- ------- --------- - -----------
------ -
-----
----------- -----------
------- ----------- -- -------------- - --------------
------- ----------- -- -------------- - --------------
------
-
-上面的代码中，我们使用了 useState 这个 Hook，它允许我们在组件中定义一个状态变量和一个更新状态的函数。在这个例子中，我们定义了一个状态变量 count 和一个更新函数 setCount，初始值为 0。当点击“+”和“-”按钮时，分别调用 setCount(count + 1) 和 setCount(count - 1) 更新状态变量 count 的值。
当我们要测试某一个 Hooks 时，需要将它提取出来并进行测试。我们定义一个新的 Hook，将原来的 Counter 组件中的 useState Hook 提取出来，形成如下代码：
-- -------------------- ---- ------- ------ - -------- - ---- ------- ------ -------- ------------------------ - ----- ------- --------- - ---------------------- ----- --------- - -- -- -------------- - -- ----- --------- - -- -- -------------- - -- ------ - ------ ---------- --------- - -
在这个 Hook 中，我们将原来的状态变量和更新函数提取出来，以一个对象的形式返回。同样，我们可以使用 Enzyme 和 Jest 对这个 Hook 进行测试：
-- -------------------- ---- -------
------ - ---------- - ---- --------------
---------------------- -- -- -
---------- ---------- ----- -- --- -- -- -
----- - ----- - - -------------
------------------------
--
---------- --------- ------- -- -- -
----- - ------ --------- - - -------------
-----------
------------------------
--
---------- --------- ------- -- -- -
----- - ------ --------- - - -------------
-----------
-------------------------
--
--在这个测试中，我们直接使用 useCounter Hook 返回的对象属性进行断言验证。
使用 jest.mock 模拟 Hooks
通过上面的测试，我们可以很好地验证 useCounter Hook 的正确性，但还有一个重要的问题：在测试 useCounter Hook 的组件中，如何模拟 useState？
假设我们有如下的组件使用 useCounter Hook：
-- -------------------- ---- -------
------ ----- ---- -------
------ - ---------- - ---- --------------
------ ------- -------- --------- -
----- - ------ ---------- --------- - - -------------
------ -
-----
----------- -----------
------- ------------------------------
------- ------------------------------
------
-
-我们需要在测试过程中，模拟出 useState 的效果。这时候，我们可以使用 jest.mock 方法，在测试文件中模拟出 useCounter 返回的值：
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------- - ---- --------
------ ------- ---- -----------
------------------------- -- -- --
----------- -------------- -- --
------ --
---------- ----------
---------- ---------
--
---
------------------- -- -- -
---------- ------ ------- ------- -- -- -
----- ------- - -------------------
-------------------------------------------------- ---
--
---------- ---- --------- ---------- -- -- -
----- ------- - -------------------
----------------------------------------------
-------------------------------------------------- ---
-------------------------------------------------
--
---------- ---- --------- ---------- -- -- -
----- ------- - -------------------
----------------------------------------------
-------------------------------------------------- ---
-------------------------------------------------
--
--在这个测试中，我们使用 jest.mock 方法，来模拟掉 useCounter。在第二个测试中，我们同时断言 useCounter().increment 是否被调用。
总结
本文介绍了如何使用 Enzyme 和 Jest 进行 React Hooks 的单元测试，包括如何提取 Hooks 并对其进行测试，以及如何模拟 useState 等 React 内置 Hooks。希望通过本文的学习和实践，你能够更加熟练地使用 Hooks，并为你的代码提供更加可靠的保障。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6480162948841e9894f958b1