React Hooks 是 React16.8 的新特性，它们允许你在函数组件中使用 state 和其他 React 特性。然而，如何测试这些 hooks 可能会有点棘手。在本文中，我们将讨论使用 Jest 测试 React Hook 的不同方式。
使用 React Testing Library 测试单个 hook
React Testing Library 是一个非常流行的 React 测试库，可用于测试 React 应用中的组件和 hooks。可以使用 renderHook 函数来测试 React Hook。例如，假设我们有一个自定义 hook 名为 useCounter，其返回值是一个包含 count 和 increment 方法的对象。
-- -------------------- ---- ------- ------ - -------- - ---- -------- ------ ----- ---------- - ------------- - -- -- - ----- ------- --------- - ----------------------- ----- --------- - -- -- -------------- - --- ------ - ------ --------- -- --
现在我们将使用 renderHook 来测试 useCounter：
-- -------------------- ---- -------
------ - ----------- --- - ---- -------------------------------
------ - ---------- - ---- ---------------
---------------------- -- -- -
---------- ---------- ---- --- -- -- -
----- - ------ - - ------------- -- --------------
----------------------------------------
---
---------- --------- ------- -- -- -
----- - ------ - - ------------- -- --------------
------ -- -
---------------------------
---
----------------------------------------
---
---在上面的示例中，我们通过 renderHook 函数调用 useCounter hook，然后测试 count 属性和 increment 方法。
测试多个 hooks
当多个 hooks 以某种方式相互关联时，我们可能需要在测试中使用更多的 mock。例如，假设我们有一个使用 useCounter hook 的组件，还使用了 useEffect 和 useRef hooks。
-- -------------------- ---- -------
------ ------ - ---------- ------ - ---- --------
------ - ---------- - ---- ---------------
------ ----- ------------------ - -- -- -
----- - ------ --------- - - -------------
----- ----------- - -------------
------------ -- -
------------------- - ---------------------- ------
------ -- -- -
-----------------------------------
--
-- -------------
------ ------------ ------ --------------
--现在我们将使用 React Testing Library 来测试 CounterWithEffects 组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- --- - ---- -------------------------
------ - ---------- - ---- ---------------
------ - ------------------ - ---- -----------------------
---------------------
------------------------- -- -- --
----------- ----------
----
------------------------------ -- -- -
------------- -- -
-------------------------------- -- -
------ - ------ -- ---------- --------- --
---
---
------------ -- -
---------------------
---
---------- ------ ------------------ ----------- ----- -- -- -
--- --------
----- --------- -- -- -
------- - -------------------------- ----
---
------------------------------------------------------------------------------------ ------ ----
---
---------- --------- ----- ----- - -------- ----- -- -- -
--- --------
----- --------- -- -- -
------- - -------------------------- ----
---
------ -- -
-------------------------------
---
------------------------------------------------------------------------------------ ------ ----
---
---在上面的示例中，我们使用 jest.mock 函数来模拟 useCounter hook，并在测试中使用 jest.useFakeTimers 来模拟 setInterval 函数。然后我们测试了 CounterWithEffects 组件中的计数器值和增量函数。
结论
React Hooks 是 React 的一个强大功能，很容易使用，但是测试 hooks 可能有点棘手。在本文中，我们学习了如何使用 Jest 和 React Testing Library 测试不同的 hooks。希望这篇文章将会有所帮助，为你未来的 React Hook 测试提供一些指导意义！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671c81799babaf620fb112ac