在 React 中，自定义 hooks 是一种非常常见和重要的编写组件逻辑的方式。通常，自定义 hooks 可以提取公共逻辑和状态，以便在多个组件中重用。然而，测试自定义 hooks 并不像测试组件那么直接。在这篇文章中，我们将介绍使用 Enzyme 测试 React 组件时如何测试组件的自定义 hooks，并提供相关示例代码。
Enzyme 是什么？
Enzyme 是一个流行的 React 测试工具，它提供了一组易于使用的 API，可以帮助我们检查组件的渲染结果、交互行为和状态变化。Enzyme 由 Airbnb 开发和维护，可以与多种测试框架（如 Jest 和 Mocha）一起使用。Enzyme 支持三种不同的渲染方式：shallow、mount 和 render，可根据实际需要选择不同的渲染方式进行测试。
测试自定义 hooks
自定义 hooks 可以被多个组件调用，因此我们不能直接在组件中测试它们。在 Enzyme 中，我们可以通过编写基于 hooks 的单元测试来测试它们。首先，我们需要编写一个测试 hooks 的测试用例，然后使用 renderHook 函数来运行该 hooks 并检查其返回值。
-- -------------------- ---- -------
------ - ---------- - ---- -------------------------------
------ ------------- ---- ------------------
------------------------- -- -- -
---------- ------ ------- ------- ------- -- -- -
----- - ------ - - ------------- -- -----------------
------------------------------------------------------
---
---------- ------ ----- ----------- -- -- -
----- - ------ - - ------------- -- -----------------
------ -- -
----------------------------------------
---
--------------------------------------------------
---
---在上面的示例中，我们使用 renderHook 函数来测试 useCustomHook，并检查其返回值。注意，在测试钩子时，我们需要使用 act 函数来管理渲染周期和状态更新。
测试使用自定义 hooks 的组件
当我们编写使用自定义 hooks 的组件时，我们需要确保 hooks 返回正确的状态和函数。为了测试组件中的 hooks，我们可以使用 shallow 或 mount 函数渲染组件，并使用 find 函数与 hooks 交互。
-- -------------------- ---- -------
------ - ------- - ---- ---------
------ ----- ---- --------
------ ----------------------- ---- ----------------------------
----------------------------------- -- -- -
---------- ------ ---- ------- ------- -- -- -
----- ------- - -------------------------------- ----
------------------------------------------------
------------------------------------------------
---
---------- ---- ------ ---- ----------- -- -- -
----- ------- - -------------------------------- ----
---------------------------------------------------
-----------------------------------------
----------------------------------------------------------------
---
---在上面的示例中，我们使用 shallow 函数渲染 ComponentWithCustomHook 组件，并使用 find 函数查找其中使用的自定义 hooks。我们模拟 button 的点击事件，并检查 result 类下的文本是否等于 UPDATED_STATE。这些测试确保了组件逻辑的正确性和准确性。
结论
自定义 hooks 很常见并且非常有用，但要测试它们需要使用一些不同于组件测试的技巧。使用 Enzyme，我们可以编写基于 hooks 的单元测试，检查 hooks 的返回值。另外，在测试使用 hooks 的组件时，我们需要使用 shallow 或 mount 函数渲染组件，并使用 find 函数查找 hooks 元素来进行测试。希望这篇文章能够帮助你更好地理解如何测试自定义 hooks。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6747c0d4555db9718d189b9d