使用 Enzyme 测试几个有用的 React 组件

阅读时长 11 分钟读完

前言

在前端开发中,测试是不可或缺的一环。React 是一个流行的前端框架,提供了强大的组件化开发能力。在测试 React 组件时,我们通常会使用 Enzyme 这个测试工具,它提供了丰富的 API,可以帮助我们方便地测试组件。

本文将介绍一些常用的 React 组件,如何使用 Enzyme 测试它们,并讲解一些相关的测试技巧和最佳实践。

单元测试和集成测试

在测试前,我们需要了解两个重要的概念:单元测试和集成测试。

单元测试是指对程序的最小功能模块进行测试,如一个函数或一个组件。我们通过模拟其输入,测试其输出是否正确,从而验证模块的功能是否正常。单元测试通常可以在开发过程中频繁运行,以保证代码质量和快速反馈。

集成测试是指将多个模块组合在一起进行测试,以验证它们之间的交互是否正常。集成测试需要在开发完成后进行,通常会占用较长的时间。

在测试 React 组件时,我们通常要进行单元测试和集成测试。单元测试是针对组件内的最小单元进行测试,集成测试是测试多个组件之间的交互。

示例组件

接下来,我们将创建一些示例组件,用以演示如何使用 Enzyme 进行测试。这些组件包括:

  • Input 组件:带有输入框和提交按钮,用于输入文本内容和提交。
  • List 组件:用于展示一组数据列表。
  • Parent 组件:包含一个 Input 组件和一个 List 组件,用于展示输入的数据列表。

为了方便测试,我们将这些组件都定义为函数组件,并使用了 React Hooks。

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

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

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

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

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

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

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

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

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

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

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

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

接下来,我们将使用 Enzyme 对这些组件进行测试。

安装和配置 Enzyme

在使用 Enzyme 之前,我们需要先安装并配置它。我们可以通过以下命令安装 Enzyme:

然后,在代码中配置 Enzyme:

现在,我们已经准备好开始测试了。

使用 Enzyme 测试 Input 组件

首先,我们需要测试 Input 组件。我们可以分别测试以下两个场景:

  1. 用户输入文本后提交,触发 onSubmit 事件。
  2. 用户输入空格后提交,不触发 onSubmit 事件。

我们可以使用 simulate 方法来模拟用户操作。代码如下:

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

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

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

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

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

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

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

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

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

我们使用了 jest.fn 创建一个模拟函数,用于记录是否触发了事件。然后,我们用 mount 方法将 Input 组件挂载到虚拟 DOM,以便我们可以模拟用户操作。

在第一个测试中,我们模拟用户输入文本,并点击提交按钮。然后,我们使用 toHaveBeenCalledWith 方法来验证是否正确地调用了 onSubmit 方法,并传递了正确的参数。

在第二个测试中,我们模拟用户输入空格,并点击提交按钮。然后,我们使用 not.toHaveBeenCalled 方法来验证 onSubmit 方法是否未被调用。

使用 Enzyme 测试 List 组件

接下来,我们需要测试 List 组件。我们可以测试以下场景:

  1. 组件能够正确地渲染列表项。
  2. 组件在没有数据时,渲染一个空的列表。

我们可以使用 mount 方法将 List 组件挂载到虚拟 DOM,并断言是否正确地渲染了列表项。代码如下:

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

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

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

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

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

在第一个测试中,我们传递了一个包含三个数据项的数组,然后断言是否正确地渲染了三个列表项。我们使用了 toHaveLength 方法来验证列表项的数量,并使用 at 方法分别验证每个列表项的内容。

在第二个测试中,我们传递了一个空数组,然后断言是否正确地渲染了一个空列表。

使用 Enzyme 测试 Parent 组件

最后,我们需要测试 Parent 组件。我们可以测试以下场景:

  1. 组件能够正确地渲染子组件。
  2. 在 Parent 组件中触发 Input 组件的 onSubmit 事件时,List 组件能够正确地渲染数据。

我们可以使用 mount 方法将 Parent 组件挂载到虚拟 DOM,模拟用户输入和点击事件,断言是否正确地渲染了子组件,并验证是否正确地更新了 List 组件。代码如下:

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

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

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

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

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

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

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

在第一个测试中,我们只需要断言是否正确地渲染了 Input 和 List 组件。

在第二个测试中,我们模拟用户输入和点击事件,并使用 find 方法查找 List 组件的列表项,然后断言是否正确地更新了列表项。

总结

在本文中,我们介绍了如何使用 Enzyme 测试 React 组件。我们演示了如何使用 Enzyme 测试 Input、List 和 Parent 组件,并讲解了一些常用的测试技巧和最佳实践。

在开发 React 组件时,单元测试和集成测试是不可或缺的一环。通过使用 Enzyme,我们可以方便地进行组件测试,提高代码质量和开发效率。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64eade40f6b2d6eab359d1ff

纠错
反馈