如何在 Enzyme 中测试 React 中的表单组件?

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

在前端开发中,表单组件是非常常见的组件之一,因此如何测试表单组件是前端测试的关键环节。Enzyme 是 React 的一个测试工具,可用于模拟 React 组件并在测试中进行交互。

在本文中,我们将通过一个具体的示例来演示如何使用 Enzyme 测试 React 中的表单组件,并深入了解 Enzyme 中的相关方法和测试策略。

为何选择 Enzyme 进行测试

在 React 开发中,我们常常会遇到以下问题:

  • 如何对组件进行交互测试
  • 如何对组件的状态更改进行测试
  • 如何对组件的属性进行测试

这些问题可以通过 Enzyme 解决。Enzyme 是一个流行的 React 测试工具,它可以模拟 React 组件并允许我们在测试中进行交互操作和状态更改。

Enzyme 包括三个模式:shallow,mount,和 render。在本文中,我们主要使用 shallow 和 mount 两种模式。

  • 使用 shallow 模式:深层次渲染组件,并返回一个浅层次包装器。该包装器可以用于测试组件的行为和交互,但不会渲染子组件。
  • 使用 mount 模式:在 DOM 中渲染组件,在测试中可以与其它组件进行交互。该模式可用于测试组件的渲染和交互,但比 shallow 模式更慢。

接下来,我们将使用这些方法测试 React 中的表单组件。

编写示例代码

接下来,我们将从创建一个简单的表单开始,然后创建一个测试套件。

创建表单组件

我们首先创建一个表单组件 LoginForm,该组件包括一个输入框和一个按钮,用户可以在输入框中输入用户名和密码。点击提交按钮后,组件将检查用户名和密码是否符合规则,并在符合规则时将表单值通过 props 的方式传递给父组件。

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

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

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

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

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

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

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

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

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

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

创建测试套件

接下来,我们将创建一个测试套件,其中包含多个测试用例,分别测试 LoginForm 组件中的不同部分。首先,我们安装必要的依赖项:

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

然后,我们创建一个包含测试用例的文件 LoginForm.test.js。该文件包括四个测试用例,分别测试组件的渲染,输入,提交和表单验证。

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

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

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

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

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

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

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

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

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

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

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

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

让我们逐个测试用例地看一下它们的作用。

测试用例 1:渲染组件

该测试用例确保 LoginForm 组件能够正常渲染且不会崩溃。

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

测试用例 2:验证初始状态

该测试用例确保 LoginForm 组件的初始状态是正确的,即表单输入框中没有值。

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

测试用例 3:测试表单输入

该测试用例确保我们可以通过测试代码更改表单输入框的值,并验证其状态是否已更改。

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

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

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

测试用例 4:测试表单提交和验证

该测试用例演示了如何提交表单数据,并验证表单数据的有效性。

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

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

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

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

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

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

这两个测试用例分别测试了表单提交和表单验证。在第一个测试用例中,我们使用 mount 模式渲染 LoginForm 组件,并使用 simulate 方法更改输入框值,然后模拟提交表单。我们使用 jest.fn() 创建一个模拟函数来替代实际的 handleSubmit 函数。最后,我们检查模拟函数是否被调用,并确保提交的表单值是正确的。

第二个测试用例类似,但不同之处在于我们模拟的表单数据不符合规则,因此我们预计模拟方法不会被呼叫。

结论

现在,您已经了解了如何使用 Enzyme 测试 React 中的表单组件,以及如何模拟用户输入和模拟表单提交,测试表单的验证逻辑和输入数据。Enzyme 是 React 测试的强大工具,可以简化测试过程并提高测试覆盖率。在您的下一个 React 项目中尝试使用 Enzyme 进行测试。

完整代码:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/67219b922e7021665e082e33


猜你喜欢

  • 优化 ESLint 配置:如何快速配置和使用 ESLint

    介绍 ESLint 是一个用于 JavaScript 代码检查的工具,它可以在代码编写时发现潜在的问题,提高代码质量和可维护性。本文将介绍如何快速配置和使用 ESLint,以及优化它的配置以满足项目需...

    9 天前
  • Webpack 构建时出现 “TypeError: object is not a function” 的解决方法

    背景 在使用 Webpack 进行前端项目构建时,可能会出现 “TypeError: object is not a function” 的错误提示,导致项目无法正常构建。

    9 天前
  • Jest 测试中使用 ESLint 插件的最佳实践

    随着前端开发的迅速发展,测试成为了每个开发团队必不可少的一部分。Jest 作为一种 JavaScript 测试框架,越来越受到前端开发者的青睐。而在测试过程中,代码风格的一致性非常重要,这就需要对代码...

    9 天前
  • Serverless运行环境下的运维监控策略分析

    随着云计算和微服务架构的普及,Serverless架构越来越成为前端开发的关注重点。Serverless(无服务器)架构是一种架构风格,允许开发人员构建和运行应用程序和服务,而无需管理基础架构。

    9 天前
  • 解决 Squidex Headless CMS 中用户无法访问的问题及解决方法

    在使用 Squidex Headless CMS 进行开发时,有时候会遇到用户无法访问的问题,这个问题可能是由于多种因素导致的,本文将会介绍这个问题的解决方法。 问题原因 Squidex Headl...

    9 天前
  • Redux 中如何进行国际化和本地化

    随着全球化的发展,许多应用需要支持多语言和本地化。Redux 是一种在前端应用中进行状态管理的工具,因此如何使用 Redux 进行国际化和本地化是我们需要考虑的问题之一。

    9 天前
  • 与 Kubernetes 相关的日志记录技术

    简介: Kubernetes 是目前最流行的容器编排工具之一。对于经常使用 Kubernetes 的开发人员来说,很重要的一点就是要了解如何记录日志信息。 Kubernetes 通过 Kubernet...

    9 天前
  • 如何在 CSS Reset 时手描不描万年不变的规则

    CSS Reset 是指为了消除浏览器默认样式而在样式表最前面插入一段样式的技术。通常情况下,这段样式会覆盖掉大部分元素的所有默认样式,以达到更好的重置样式的目的。

    9 天前
  • Vue.js 结合 Web API 中遇到的问题及解决方法

    Vue.js 是目前在前端开发领域中非常流行的框架,它可以帮助我们更快地构建可维护且高效的 Web 应用程序。使用 Vue.js 结合 Web API 也是常见的开发方式,但是在实际开发中,我们也经常...

    9 天前
  • 在使用 Enzyme 测试 React Native 应用时如何优化测试速度?

    作为一名前端开发人员,我们都知道测试是非常重要的。特别是当我们开发 React Native 应用程序时,测试还可以确保我们的应用能够在多个操作系统和设备上稳定运行。

    9 天前
  • 如何使用 Node.js 进行 Web 爬虫

    如何使用 Node.js 进行 Web 爬虫 Web 爬虫是一种获取 Web 页面信息的程序,它可以从 Web 页面中抽取数据并进行进一步处理。在本文中,我们将讨论如何使用 Node.js 编写 We...

    9 天前
  • MongoDB 社区版和 MongoDB 企业版的主要差别

    MongoDB 是一个高性能、开源、面向文档数据库。它使用灵活的 JSON 格式的文档存储数据,支持动态查询、索引、集群和高可用性。MongoDB 有两个版本可供使用:MongoDB 社区版和 Mon...

    9 天前
  • 如何使用 Cypress 对自定义组件进行测试

    前言 前端开发者经常需要进行自定义组件的开发和测试,因此需要掌握一定的测试工具和技能,以保障项目的质量和稳定性。其中,Cypress 是一个优秀的前端测试框架,可以用来测试一个网站的所有功能,并支持测...

    9 天前
  • 如何在 Hapi 框架中实现邮件发送功能

    邮件发送在 web 应用程序中是非常常见的操作,它们用于发送用户验证邮件、通知邮件等等。Hapi 框架是一个流行的 Node.js 框架,它提供了一组强大的工具和插件,使得邮件发送变得非常容易。

    9 天前
  • TypeScript 中使用泛型的常见错误及解决方案

    在 TypeScript 项目中使用泛型可以帮助我们编写更具可重用性的代码,但是在使用泛型的过程中也可能遇到一些常见的错误。本文将介绍一些常见的 TypeScript 泛型错误,并提供解决方案和示例代...

    9 天前
  • CSS Grid 基础教程

    CSS Grid 是一种新的布局方式,它使网页布局更加灵活和强大。通过使用 CSS Grid,您可以轻松地创建复杂的网格布局,同时保持页面的响应性和可访问性。本教程将为您提供 CSS Grid 的基础...

    9 天前
  • Babel编译后代码运行出现‘Symbol is not defined’错误的解决方案

    1. 问题背景 在使用Babel编译ES6+代码到ES5时,有时候会遇到在运行编译后的代码时,控制台报错"Symbol is not defined"的错误。 这个错误通常出现在使用了ES6 Symb...

    9 天前
  • AngularJS 单页应用中的数据分页方式详解

    随着 Web 技术的快速发展,单页应用(Single Page Application,SPA)正在变得越来越流行。在 SPA 中,页面中的数据通常是从服务器异步获取的,并且是按需加载的。

    9 天前
  • Webpack 打包代码文件过大的问题及解决方式

    在开发过程中,我们通常需要使用Webpack来将前端代码打包压缩,以减小文件体积,提高页面加载速度。然而,在使用Webpack时,有些人会遇到打包后文件体积过大的问题,这会导致页面加载速度变慢,甚至会...

    9 天前
  • 基于 Serverless 的小程序开发实践探索

    概述 Serverless 架构是一种无需管理服务器的云计算解决方案,可以让开发者更专注于业务逻辑的实现,而不必关注底层基础设施。在实际应用中,Serverless 架构在小程序开发中得到了广泛的应用...

    9 天前

相关推荐

    暂无文章