React Hooks 是 React 的一项新功能，它可以让开发者更方便地共享状态和逻辑。Enzyme 则是 React 的一款测试工具库，用来测试组件的行为和状态。
在这篇文章中，我们将深入探讨如何使用 Enzyme 来测试 React Hooks 组件的行为与状态，以及如何对 Hooks 实现的自定义组件进行单元测试。
Enzyme 简介
Enzyme 是由 Airbnb 开源的 React 组件测试工具库，它提供了一套强大而易于学习的 API 来测试页面上的 React 组件。
Enzyme API 提供了三种渲染组件的方式：
- shallow
- mount
- render
在本文中，我们将使用 shallow 渲染方式来测试 React Hooks 组件。因为它只会测试组件本身，不会深入测试子组件，测试速度更快。但是如果您想测试组件的渲染输出，那么 mount 或 render 渲染方式是必须的。
测试 React Hooks 组件
测试 React Hooks 组件与传统的 React 组件测试并没有太大的区别。为了更好地说明这一点，我们将通过一个示例代码来演示如何测试使用了 Hooks 的组件 Counter。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- --------- -
----- ------- --------- - ------------
------ -
-----
--------- -----------
------- ----------- -- -------------- - ---------------------
------
--
-
------ ------- --------如您所见，Counter 组件使用了 React Hooks 的 useState 用来保存和更新一个状态变量 count。
现在，我们来演示一下如何使用 Enzyme 测试这个组件。首先，我们需要安装 Enzyme 和其 React 适配器：
npm i enzyme enzyme-adapter-react-16 --save-dev
然后，在我们的测试代码中，我们需要导入 configure, shallow, 和我们要测试的组件：
import React from 'react';
import { configure, shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import Counter from './Counter';
configure({ adapter: new Adapter() });对于 React Hooks 组件的测试，我们需要模拟我们的 Hook 在组件内部的正确性。我们可以通过进行虚拟 render 或 shallow 在我们的组件中模拟所有的 Hooks。这就是为什么我们在测试 Counter 组件时选择使用 shallow 渲染。
现在，我们可以通过以下代码异常我们的测试：
-- -------------------- ---- -------
----------------- ----------- -- -- -
---------- ------ ------- -------- -- ------- -- -- -
----------------------- -------------------------------------
---
---------- ------ ------- -- -- -
----- ------- - ---------------- ----
--------------------------------------------- ----
---
---------- -------- ----- -- --- -- -- -
----- ------- - ---------------- ----
-----------------------------------------
--------------------------------------------- ----
---
---第一个测试 should render without throwing an error 是一个基本的测试。它检查是否能够成功渲染 Counter 组件，如果组件渲染失败，那么显然测试不通过。
第二个测试 should render count 检查组件的初始状态是否正确。它查找 p 元素并检查其文本是否与 Count: 0 相等。
第三个测试 should increase count by 1 模拟点击 Counter 组件的增加按钮，并检查文本是否正确更新为 Count: 1。
测试 useState Hooks
在上面的示例中，我们仅测试了一个 useState Hooks。但是，在实际的应用程序中，您可能使用了之前介绍过的其他 Hooks。幸运的是，测试其他 Hooks 的过程与测试 useState Hooks 大致相同。
例如，对于组件中使用了 useEffect Hooks，我们可以使用 jest.useFakeTimers() 并手动触发 setTimeout，并判断 useEffect 回调函数是否能够顺利运行，从而确保我们的测试可以正常工作。
总结
测试是前端开发中的重要一环，它可以确保我们的代码逻辑正确，保证代码在后期维护中能够稳定快速地运行。Enzyme 提供了一套功能强大而易于学习的 API 用于测试 React 组件，包括 React Hooks 组件。在本文中，我们已经学会了如何使用 Enzyme 来测试 React Hooks 组件的行为与状态，以及如何对 Hooks 实现的自定义组件进行单元测试。
虽然 Hooks 组件的测试可能需要使用一些额外的技巧，例如在测试中模拟 Hooks，但是通过 Enzyme，这些更复杂的测试将变得容易，可以更加自信地进行测试工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/664c61edd3423812e4b3403e