使用 Enzyme 和 Jest 测试 React 组件：入门指南

React 是一款流行的前端框架，它的组件化开发方式让开发者可以更加轻松地创建复杂的用户界面。然而，随着应用程序变得越来越复杂，测试也变得越来越重要。在本篇文章中，我们将介绍如何使用 Enzyme 和 Jest 来测试 React 组件。

什么是 Enzyme 和 Jest？

Enzyme 是一个 React 组件测试工具，它提供了一系列实用的工具来测试组件的输出、状态和行为。Enzyme 是由 Airbnb 开发的，它的灵活性和易用性使得它成为了 React 生态系统中最受欢迎的测试工具之一。

Jest 是一个由 Facebook 开发的 JavaScript 测试框架，它可以用于测试 React 组件、Node.js 应用程序和其他 JavaScript 代码。Jest 提供了一些实用的工具，如自动化测试、测试覆盖率和快照测试。

安装 Enzyme 和 Jest

在开始之前，您需要安装 Enzyme 和 Jest。您可以使用 npm 或 yarn 来安装这些工具。

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

或者

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

编写第一个测试

让我们从一个简单的测试开始，测试一个简单的 React 组件。假设我们有一个名为 HelloWorld 的组件，它的作用是显示一个欢迎消息。以下是组件的代码：

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

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

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

我们想要测试这个组件是否正确地渲染了欢迎消息。以下是测试代码：

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

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

让我们分解一下这个测试代码：

  1. 首先，我们导入了 shallow 函数和 HelloWorld 组件。
  2. 然后，我们使用 describe 函数定义一个测试套件，这个测试套件包含一个测试用例。
  3. 在测试用例中，我们使用 shallow 函数来渲染 HelloWorld 组件，并将其存储在 wrapper 变量中。
  4. 我们创建了一个 welcomeMsg 变量，它包含一个 <h1> 元素和欢迎消息文本。
  5. 最后，我们使用 expect 函数来断言 wrapper 变量是否包含 welcomeMsg。

如果一切正常，这个测试应该通过。否则，测试将会失败，并显示一个错误信息。

测试组件的状态

在 React 中，组件的状态是一个非常重要的概念。状态可以影响组件的渲染结果，所以测试组件的状态非常重要。

让我们考虑一个简单的计数器组件，它可以增加和减少一个数字。以下是组件的代码：

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

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

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

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

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

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

我们想要测试这个组件是否正确地增加和减少数字。以下是测试代码：

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

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

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

让我们分解一下这个测试代码：

  1. 首先，我们导入了 shallow 函数和 Counter 组件。
  2. 然后，我们使用 describe 函数定义一个测试套件，这个测试套件包含两个测试用例。
  3. 在第一个测试用例中，我们使用 shallow 函数来渲染 Counter 组件，并将其存储在 wrapper 变量中。
  4. 我们使用 wrapper.find 函数来查找 <button> 元素，并使用 at 函数来选择第一个按钮。
  5. 然后，我们使用 simulate 函数来模拟按钮的点击事件。
  6. 最后，我们使用 expect 函数来断言 wrapper.find('h1').text() 是否等于 '1'。
  7. 在第二个测试用例中，我们重复了相同的步骤，但是我们选择了第二个按钮，并期望数字 -1。

如果一切正常，这两个测试应该通过。否则，测试将会失败，并显示一个错误信息。

测试组件的生命周期方法

在 React 组件中，生命周期方法是非常重要的。它们可以用来处理组件的挂载、卸载和更新等事件。测试这些事件是否被正确地触发非常重要。

让我们考虑一个简单的计时器组件，它可以显示当前时间。以下是组件的代码：

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

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

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

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

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

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

我们想要测试这个组件是否正确地更新了时间。以下是测试代码：

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

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

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

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

让我们分解一下这个测试代码：

  1. 首先，我们导入了 mount 函数和 Clock 组件。
  2. 然后，我们使用 describe 函数定义一个测试套件，这个测试套件包含一个测试用例。
  3. 在测试用例中，我们使用 jest.useFakeTimers 函数来启用 Jest 的假计时器。
  4. 我们使用 mount 函数来渲染 Clock 组件，并将其存储在 wrapper 变量中。
  5. 我们使用 expect 函数来断言 wrapper.find('h1').text() 是否包含字符串 '12:00:00'。
  6. 然后，我们使用 jest.advanceTimersByTime 函数来模拟计时器的更新。
  7. 最后，我们使用 expect 函数来断言 wrapper.find('h1').text() 是否不再包含字符串 '12:00:00'。
  8. 在测试结束时，我们使用 jest.useRealTimers 函数来还原 Jest 的真实计时器。

如果一切正常，这个测试应该通过。否则，测试将会失败，并显示一个错误信息。

快照测试

快照测试是一种测试方法，它可以检查 React 组件的渲染结果是否与预期一致。它可以帮助我们检测组件的布局、样式和交互等方面的变化。

让我们考虑一个简单的按钮组件，它可以显示不同的文本和样式。以下是组件的代码：

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

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

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

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

我们想要测试这个组件的不同状态是否正确地渲染。以下是测试代码：

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

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

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

让我们分解一下这个测试代码：

  1. 首先，我们导入了 shallow 函数和 Button 组件。
  2. 然后，我们使用 describe 函数定义一个测试套件，这个测试套件包含两个测试用例。
  3. 在第一个测试用例中，我们使用 shallow 函数来渲染 Button 组件，并将其存储在 wrapper 变量中。
  4. 我们使用 expect 函数来断言 wrapper 是否与快照匹配。
  5. 在第二个测试用例中，我们重复了相同的步骤，但是我们没有指定 primary 属性，并期望组件的样式变为危险样式。

如果一切正常，这两个测试应该通过。否则，测试将会失败，并显示一个错误信息。

结论

在本篇文章中，我们介绍了如何使用 Enzyme 和 Jest 来测试 React 组件。我们学习了如何测试组件的输出、状态和生命周期方法，以及如何使用快照测试来检查组件的布局和样式。希望这篇文章对您有所帮助，让您的 React 应用程序更加健壮和可靠。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6739b687317fbffedf1845c3

阅读全文

精选内容

相关推荐

    暂无