在 Jest 中测试 React 中的 Hook-JavaScript中文网-JavaScript教程资源分享门户

在 Jest 中测试 React 中的 Hook

AI 编程助手，豆包旗下的编程助手，提供智能补全、智能预测、智能问答等能力，节省开发时间，释放脑海中的创造力，支持 VSCode，点击体验 AI

在 Jest 中测试 React 中的 Hook

React 中的 Hook 是一个相对较新的概念，它允许开发者在函数式组件中使用类似于类组件中的状态和生命周期的特性。因为它们是完全独立的功能单元，所以测试它们的有效性非常重要。幸运的是，Jest 已经成为了 React 生态系统中最受欢迎的测试框架之一，并且本文将向您展示如何在 Jest 中测试 React 中的 Hook。

我们将从一个真实的示例开始。我们将测试一个 useFetch 自定义 Hook ，该 Hook 接收一个 URL 并返回从服务器获取的数据。这是一个非常基本的 Hook，但是它已经足够来演示 Jest 可以在诸如此类 Hook 上实现的所有功能。下面是我们的代码片段：

------ - --------- --------- - ---- --------

------ ------- -------- ------------- -
  ----- ------ -------- - ---------------
  ----- --------- ----------- - ----------------

  ------------ -- -
    -----------------
    ----------
      --------- -- -----------
      ---------- -- -
        --------------
        ------------------
      --
      ---------- -- ------------------
  -- -------

  ------ - ----- ------- --
-

在这个 Hook 中，我们使用了useState和useEffect。我们通过 useEffect 发送了一个网络请求并在成功或失败后更新状态。最后，我们返回一个包含数据和加载状态的对象。现在让我们来测试这个 Hook 。

安装 Jest 首先，我们需要在项目中安装 Jest。我们只需要运行以下命令就可以安装它：

--- ------- ---------- ----

安装 React-DOM、react-test-renderer 和 axios。 React-DOM 和 react-test-renderer 可以帮助我们在测试中呈现组件和快照。而 axios 是 HTTP 客户端库，我们将使用它来测试从服务器获取数据的功能。运行以下命令来安装它们：

--- ------- ---------- ------------------- ---------------------- -----

创建测试用例接下来，我们将创建一个测试用例以确保状态和定时器成功更新。

------ - ----------- --- - ---- -------------------------------
------ ----- ---- --------
------ -------- ---- -------------

-------------------

-------------------- -- -- -
  ---------- ------ ---- --- --------- ----- -- -- -
    --------------------------------- ----- - --------- ------ - ---
    ----- - ------- ----------------- - - ------------- --
      -------------------------------------
    --

    --------------------------------------------
    ----------------------------------------

    ----- --------------------

    -------------------------------------------
    ------------------------------------- --------- ------ ---
  ---
---

在测试中，我们使用了 renderHook ，它是 React Testing Library 提供的一个帮助函数，用于渲染自定义 Hook 并返回结果。我们使用 jest.mock() 来模拟 axios 的 Http 请求并处理响应结果。我们还使用 act() 来将结果更新到声明性渲染中并等待 Hook 状态的更新。最后，我们比较结果以确定逻辑是否按预期工作。

这就完成了在 Jest 中测试 React 中的 Hook 的过程。我们在测试中模拟了一个 hook，并在处理 HTTP 请求响应后将其所有结果更新到声明性渲染中。这种方法比手动测试正确性要快得多，避免了因操作失误而导致的错误。同时，我们还使用了全部功能，例如待处理状态和模拟服务器响应等。

结论在 Jest 中测试 React Hook，我们可以使用许多工具和 API 来优雅地测试它们的复杂性和正确性。很多在类组件中使用的测试技术都可以应用到 Hook 测试中。通过使用测试工具，我们可以提高代码质量和可维护性，并确保项目的稳定性。

来源：JavaScript中文网，转载请联系管理员！本文地址：https://www.javascriptcn.com/post/67175902ad1e889fe2212156