如何使用 Enzyme 进行 Redux-Form 表单组件测试？

Redux-Form 是一个可重用的 React 表单组件库，它具有丰富的 API，方便前端开发者构建强大和美观的表单。但是，测试 Redux-Form 表单组件需要遵循一些附加步骤。在这篇文章中，我们将学习如何使用 Jest 和 Enzyme 进行 Redux-Form 表单组件测试。

环境设置

在开始使用 Enzyme 进行测试之前，您需要先进行一些环境设置。以下是必需的软件包和库：Jest、Enzyme 和 React。

在项目根目录下使用 NPM 安装这些库。

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

Enzyme 还需要适配器来使其与 React 一起使用。在 src 目录的 setupTests.js 文件中添加以下代码：

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

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

测试表单组件

现在我们已经准备好开始测试 Redux-Form 表单组件了。在本教程中，我们将使用一个带有两个输入字段的表单组件进行演示。该表单组件将接受名称和电子邮件作为输入，并在提交之前对其进行验证。

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

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

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

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

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

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

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

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

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

现在，我们将编写测试用例确保该组件的正确性。

测试表单组件渲染

第一步是确保我们的表单组件正确呈现。您可以使用以下测试用例来测试表单的呈现。

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

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

在这个测试中，我们首先使用 Jest 的 describe 方法来说明我们正在测试的组件。然后，我们编写一个测试用例，使用 Enzyme 的 shallow 方法对表单组件进行初始化，并将 handleSubmit 函数作为 prop 传递给它，以便在不进行任何实际操作的情况下触发表单提交事件。最后，我们使用 Jest 的 expect 方法，将组件呈现的快照与已存储的快照进行比较。

如果组件的呈现方式发生更改，运行测试时则会显示快照差异。

测试表单验证

第二个测试的目的是测试表单验证。Redux-Form 提供了一种方便的方式来验证表单项目，以便在提交之前查找不合法的项目。

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

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

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

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

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

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

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

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

在这个测试中，我们首先使用 beforeEach 方法初始化测试，并将 mockSubmit 函数传递给 handleSubmit 的 prop。接下来，我们测试是否有两个输入字段和一个“提交”按钮。最后，我们通过调用 simulate 方法模拟输入数据并提交表单，以确认 validate 方法是否检测到未输入任何数据的错误。

测试表单提交

最后，我们将确保表单正确提交。

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

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

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

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

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

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

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

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

此测试用例检查表单数据是否以正确的格式传递给 Redux store。

我们首先使用 createStrore 方法创建 Redux store，并使用 mount 方法挂载我们的联系表单组件。然后，我们搜索该组件中的名称和电子邮件输入和提交按钮，并使用实例方法设置表单值。最后，我们模拟表单提交并检查数据是否已成功传递给 Redux store。

结论

在本文中，我们介绍了如何在 Redux-Form 表单组件上使用 Enzyme 进行测试。我们涵盖了可重用的表单组件的呈现、验证和提交，并提供了示例代码。测试对于保证任何应用程序的质量都至关重要，Redux-Form 表单组件也是不例外，确保测试可靠性和准确性是开发过程必须的一步。

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

阅读全文

精选内容

相关推荐

    暂无