React Hook 是 React16.8 新增的一个特性，利用它可以将组件中的状态逻辑抽出成可重用的函数。使用 Hook，我们可以在不编写类的情况下使用状态和其他 React 特性。
但是，我们如何对使用 Hook 的组件进行自动化测试呢？在本文中，我们将介绍如何使用 Enzyme 测试 React Hook。
Enzyme 简介
Enzyme 是一个用于 React 应用程序的 JavaScript 测试实用程序库，在 React 组件自动化测试时非常流行。
Enzyme 允许你模拟出 React 组件的渲染结果，并测试组件的输出，交互和行为。
React Hook 背景
在对 React 15 及更早版本的组件进行测试时，通常需要 Mock 组件的方法和状态来判断是否正确渲染。这传统的方式会导致许多编写和维护测试的问题。而 React Hook 出现后，我们可以将组件的状态逻辑抽出成可重用的函数（hook），将测试代码与组件代码解耦，便于编写和维护测试。
如何使用 Enzyme 测试 React Hook
我们拿 useInput Hook 示例来进行演示。
useInput Hook，根据传入的默认值，返回一个对象，包含 value、onChange 和 resetValue 三个属性，分别用于将输入框的值与输入框绑定、输入框值的双向绑定，以及将输入框重置为默认值。
------ - -------- - ---- -------- ------ ------- -------- ---------------------- - ----- ------- --------- - ----------------------- ----- ---------- - -- -- ----------------------- ----- -------- - --- -- ------------------------- ------ - ------ --------- ---------- -- -
方法 1：测试 hook 内部
我们可以在测试代码中依次调用 useInput 返回的对象中的每一个函数，来判断它们是否正常工作。但是这种方式有点繁琐，而且我们只是测试了函数内部的逻辑，没有测试到组件中的真正效果。
------ - ----- - ---- ---------
------ -------- ---- -------------
-------------------- -- -- -
---------- --- ------- ------- -- -- -
----- ------- - -------- -- -
----- - ----- - - -----------------
------ -------------------
---
------------------------------------
---
---------- ------ ------- -- -- -
----- ------- - -------- -- -
----- - ------ -------- - - -------------
------ ------ ------------- ------------------- ---
---
---------------------------------------- - ------- - ------ ------ - ---
---------------------------------------------------------
---
---------- ----- ------- -- -- -
----- ------- - -------- -- -
----- - ------ ---------- - - --------------------
------ -
-----
--------------------
------- -----------------------------------
------
--
---
-----------------------------------------
----------------------------------------------------
---
---方法 2：测试使用 hook 的组件
在这种方法中，我们将测试 focusInput 组件，它使用了 useInput hook。我们可以使用 Enzyme 的 shallow 或 mount API 来渲染此组件。mount API 可以帮助我们渲染整个组件树，包括它的子组件。shallow API 只渲染组件，也就是只测试当前组件，而不是它子组件。
------ - ----- - ---- ---------
------ ----- ---- --------
------ -------- ---- -------------
-------- ------------ -
----- - ------ -------- - - -------------
------ -
-----
------ ----------- ------------- ------------------- --
--------- -- ----- ----- --- --------------
------
--
-
---------------------- -- -- -
---------- ----- ------- -- -- -
----- ------- - ----------------- ----
----- ----- - ----------------------
------------------------------
------------------------
------------------------------------------
---
---------- ------- ----- ------- -- -- -
----- ------- - ----------------- ----
----- ----- - ----------------------
------------------------ - ------- - ------ ------ - ---
------------------------------------------- ----- --- -------
---
---结论
通过使用 Enzyme 测试 Hook，我们可以确保 Hook 正确运行，同时也能测试组件的真实效果。在使用 Enzyme 进行自动化测试时，我们需要重点关注测试组件的功能是否正确并与其他组件正确交互。如果我们正确地测试 Hook 和组件，就可以在 React 应用程序中保持良好的代码质量。
这里，提醒大家在编写测试代码时，尤其是在处理异步代码时，一定要使用 Jest 提供的工具函数，而不是手动编写测试代码。这将使测试更加容易编写和维护。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66efe6a86fbf9601973140e1