React Hooks 是 React 16.8 版本新加入的特性，可以让我们在函数组件中使用状态（state）和其他 React 特性，从而将函数组件的复杂度提升到类组件的水平，这也为前端开发带来了极大的便利性。然而，在 Hooks 中如何测试组件呢？本篇文章将会介绍在使用 Enzyme 进行测试时，针对 React Hooks 的最佳实践，并给出相应的示例代码。
使用 Enzyme
Enzyme 是 React 的一个 JavaScript 测试实用工具，其可以通过类似 jQuery 的语法方便地搜索和修改 React 组件的 DOM 元素。首先，我们需要安装 Enzyme：
--- ------- ---------- ------ -----------------------
并在测试文件中引入：
------ ------ ---- --------- ------ ------- ---- -------------------------- ------------------ -------- --- --------- ---
此时，我们可以通过 shallow() 方法对要测试的组件进行浅渲染，即只渲染组件的一层，不渲染子组件。以下是一个简单的示例：
------ - ------- - ---- ---------
----------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - -------------------- ----
----------------------------------
---
---在上面的代码中，我们首先使用 shallow() 方法对 MyComponent 进行浅渲染，然后通过 toMatchSnapshot() 方法进行断言，测试该组件是否正确地渲染。测试结果如下：
---- -----------------------------
-----------
- ------ ------ --------- -----
-------- -------
- - -------- ------- -- - ---- ------
---- ------- - ------- - -----
------ - ------- - -----
---------- - -------- - -----
----- -----此时，我们可以得出该组件正常渲染的结论。接下来，我们将介绍在使用 Hooks 时在测试中的最佳实践。
测试 useState
useState 是 React Hooks 中最常用的钩子函数，它可以帮助我们在函数组件中使用状态。为了测试状态是否正常更新，我们可以使用 simulate() 方法来模拟用户的交互行为（如，点击事件），从而间接地测试组件是否正确地更新状态。
以下是一个简单的示例：
------ - ----- - ---- --------- ----- ------- - ------------------ ---- ----- ------ - ----------------------- ------------------------- ----------------------------------------------- -------
在上面的代码中，我们首先通过 mount() 方法对 MyComponent 进行完整渲染，然后通过 find() 方法找到该组件内部的 button 元素，并通过 simulate() 方法模拟点击行为。最后，我们通过 find() 方法找到更新后的 div 元素，并进行断言。如果更新后的状态正常，测试结果将会通过。
测试 useEffect
useEffect 是 React Hooks 中另一个常用的钩子函数，它可以帮助我们在函数组件中执行副作用。我们可以在测试中使用 wait() 方法等待副作用执行完毕，然后进行断言。
以下是一个简单的示例：
------ - ----- - ---- ---------
---------- --- ---- ----- --------- --------- ----- -- -- -
----- ------- - ----------
------------------ ----------------- ----
----- ------- -- -
-----------------------------------
---
---在上面的代码中，我们定义了一个 getData() 函数，并将其传入 MyComponent 组件中作为 prop。然后，我们在测试中通过 mount() 方法进行完整渲染，等待组件中的 useEffect() 函数执行完毕。最后，我们通过 jest.fn() 函数模拟 getData() 函数的执行，通过 wait() 方法等待副作用执行完毕，并进行断言。如果 getData() 函数正常执行，测试结果将会通过。
测试 useReducer
useReducer 是 React Hooks 中另一个常用的钩子函数，它可以帮助我们在函数组件中使用类似于 Redux 的 reducer 函数。我们可以通过 simulate() 方法模拟用户的交互行为，从而间接地测试 reducer 是否正常执行。
以下是一个简单的示例：
------ - ----- - ---- --------- ---------- --------- --------- -- -- - ----- ------- - ------------------ ---- ----- --------------- - ---------------------------------- ---------------------------------- ----- ------- - ------------------------- ------------------------------------ ---
在上面的代码中，我们通过 mount() 方法对 MyComponent 进行完整渲染，然后通过 find() 方法找到增加按钮 incrementButton，并通过 simulate() 方法模拟点击。最后，我们通过 find() 方法找到更新后的计数器元素 counter，并进行断言。如果计数器正常更新，测试结果将会通过。
综述
React Hooks 的引入使得函数组件与类组件有了相近的处理逻辑，同时也增加了测试的难度。在本文中，我们介绍了在使用 Enzyme 进行测试时，针对 React Hooks 的最佳实践，并给出了相应的示例代码。相信通过本文的介绍，我们可以更加便捷地进行 React Hooks 的测试，并有效地保证其质量。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671aeb529babaf620fa68a84