在 React 中，Hooks 是一种新的特性，它允许我们使用函数式组件来共享逻辑和状态。对于前端开发者来说，使用 Jest 测试 React 中的 Hooks 是非常重要的。因为它可以帮助我们确保我们的代码仍然有效并且不会产生任何副作用。在本文中，我们将介绍如何使用 Jest 来测试 React 中的 Hooks。
Jest 简介
Jest 是一个用于 JavaScript 测试的强大框架。它由 Facebook 开发并维护，并以速度快、易于使用、支持自动化测试和快照测试闻名。Jest 内置了断言、模拟和测试覆盖率等功能。
准备测试环境
在开始测试之前，我们需要安装 Jest 和 React Testing Library。
npm install --save-dev jest react-testing-library
然后，我们需要在项目根目录下创建一个 __tests__ 文件夹，以便 Jest 可以找到测试文件。
Hooks 基础
在我们开始测试之前，我们需要先了解一些关于 Hooks 的基础知识。React Hooks 有两种类型：状态 Hooks 和效应 Hooks。
状态 Hooks
状态 Hooks 充当了类组件中的 state ，它们允许我们在函数式组件中维护状态。其中最常用的状态集钩子是 useState ：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- --------- -
----- ------- --------- - ------------
-------- ------------- -
-------------- - ---
-
------ -
-----
----------------
------- ----------------------------------------
------
--
-在上面的示例中，我们使用了 useState ，它接受一个初始状态，返回一个状态和一个更新状态的函数。当我们调用 setCount 时，它会重新渲染我们的函数组件并更新 count 状态。
钩子效应
Hook Effects 用于处理副作用，类似于 componentDidMount 和 componentDidUpdate 用于类组件。useEffect 钩子是最常见的钩子效应，它看起来像这样：
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
-------- ------------ -------- -- -
----- ---------- ------------ - ---------------
------------ -- -
----- -------- ------------------ -
----- -------- - ----- --------------------------------------------------
----- ---- - ----- ----------------
------------------
-
-------------------
-- ------------
-- ----------- -
------ ----------------------
-
------ -
-----
------------------------
---- ------------------------- --
------
--
-在上面的示例中，我们使用了 useEffect 钩子，它允许我们在创建第一个渲染和更新之间执行副作用。在上面的代码中，我们发出对 GitHub API 的网络请求，并且 useEffect 钩子会在组件渲染时立即执行，因此我们需要使用异步函数来编写它。我们还传递了一个空数组作为第二个参数，因此 useEffect 钩子只会在符合该条件的情况下触发。
使用 Jest 测试 React Hooks
现在我们已经了解了 Hooks 的基础概念，我们可以使用 Jest 测试 Hooks 了，我们将编写两个测试用例来测试 useState 和 useEffect。
首先，我们将测试 useState 。我们将编写一个名为 useCounter 的自定义 hook，它将包含一个状态和两个更新函数，一个用于递增计数器，另一个用于递减计数器。下面是实现代码：
-- -------------------- ---- -------
------ - -------- - ---- --------
------ -------- ------------ -
----- ------- --------- - ------------
-------- ----------- -
-------------- - ---
-
-------- ----------- -
-------------- - ---
-
------ -
------
----------
----------
--
-然后，我们将编写两个测试用例来测试该 hook。我们将使用 jest-dom 库中的 toHaveTextContent 匹配器来检查文本内容。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- --------- - ---- -------------------------
------ - ---------- - ---- ---------------
-------- --------- -
----- - ------ ---------- --------- - - -------------
------ -
-----
---- ---------------------------------
------- ----------------------- --------------------
---------
---------
------- ----------------------- --------------------
---------
---------
------
--
-
---------------------- -- -- -
------------ ---------- ------- -- --- -- -- -
----- - ----------- - - --------------- ----
----- ------------ - ---------------------
--------------------------------------------
---
------------ --------- ------- ---- --------- ------ -- --------- -- -- -
----- - ----------- - - --------------- ----
----- ---------------- - -------------------------
----- ------------ - ---------------------
----------------------------------
--------------------------------------------
---
------------ --------- ------- ---- --------- ------ -- --------- -- -- -
----- - ----------- - - --------------- ----
----- ---------------- - -------------------------
----- ------------ - ---------------------
----------------------------------
---------------------------------------------
---
---在这些测试用例中，我们使用了 render 函数来渲染 Counter 组件，并使用 getByTestId 函数来获取 count 元素、increment 按钮和 decrement 按钮，然后使用 fireEvent 函数模拟按钮点击。最后，我们使用 toHaveTextContent 匹配器来检查计数器是否已更新。
然后，我们将测试 useEffect 。我们将编写一个名为 useUser 的自定义 hook，它将包含一个状态和一个更新函数，它将显示通过 GitHub API 检索的用户名和头像。下面是实现代码：
-- -------------------- ---- -------
------ - --------- --------- - ---- --------
------ -------- ----------------- -
----- ---------- ------------ - ---------------
------------ -- -
----- -------- ------------------ -
----- -------- - ----- --------------------------------------------------
----- ---- - ----- ----------------
------------------
-
-------------------
-- ------------
------ ---------
-在这个 hook 中，我们使用了 useEffect 钩子来发出对 GitHub API 的网络请求，并使用 useState 钩子来管理状态。当 username 属性更改时，useEffect 钩子会重新执行，因此我们可以保证数据始终是最新的。
然后，我们将编写一个测试来测试该 hook：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- -------------------------
------ - ------- - ---- ------------
-------- ------------ -------- -- -
----- -------- - ------------------
-- ----------- -
------ ----------------------
-
------ -
-----
------------------------
---- ------------------------- -------------------- --
------
--
-
------------------- -- -- -
------------ ------ ---- ---- ----------- ----- -- -- -
----- - ----------- ------------ - - ------------------ --------------- ----
----- ----------- - ----- ---------------- ------
----- ---------- - ---------------------
----------------------------------------
---------------------------------------
---
---在这个测试用例中，我们使用了 render 函数来渲染 GithubUser 组件，并使用 findByText 和 getByAltText 函数来获取元素。最后，我们使用 toBeInTheDocument 匹配器来检查元素是否已经呈现到 DOM 中。
结论
在本文中，我们介绍了如何使用 Jest 测试 React 中的 Hooks。我们首先了解了 Hooks 的基础知识，然后了解了如何测试 useState 和 useEffect 。这些测试用例可以帮助我们确保我们的代码仍然有效并且不会产生任何副作用。希望这篇文章能够帮助你更好地了解使用 Jest 测试 React Hooks。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67398e65317fbffedf176212