使用 Jest 集成 Enzyme 进行测试

前言

在前端开发中，测试是重要的开发环节之一。使用 Jest 集成 Enzyme，可以在 React 项目中进行UI组件的测试。Jest是Facebook推出的一款JS测试框架，而Enzyme是React专门的测试工具。本文将详细介绍使用Jest和Enzyme进行前端测试的方法和实践。

Jest简介

Jest是一款开源的基于JavaScript的测试框架，由Facebook开发和维护。它非常易于学习和使用，在React项目中被广泛使用。Jest不需要独立的配置，如果你的项目是基于create-react-app生成的，那么它就已经集成了Jest。

Jest包含了测试运行器、断言库和测试覆盖率工具等组件，它具有以下特点：

  • 执行速度非常快
  • 提供了适合React项目测试的专用模块
  • 内置的Mock、Spy和Stub功能
  • 集成了Jasmine的断言库以及自己的Mock
  • 完全基于JavaScript编写，没有任何的浏览器或DOM依赖

Enzyme简介

Enzyme是一个React组件的测试工具，它是由Airbnb开发和维护的。Enzyme具有以下特点：

  • 支持React的所有组件类型
  • 提供了基于jQuery的API，易于学习和使用
  • 对组件的渲染和输出做了优化，可以提高测试速度
  • 支持测试DOM操作

Enzyme可以被Jest、Mocha和Chai等测试工具使用。本文将使用Jest集成Enzyme进行前端测试。

安装和配置Jest和Enzyme

安装Jest

在React项目中，如果使用create-react-app创建的项目，那么它就已经集成了Jest，无需再次安装。如果你需要单独使用Jest，可以使用以下命令进行安装：

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

安装Enzyme

使用以下命令安装Enzyme：

--- ------- ---------- ------ ------------------- -----------------------
  • enzyme是Enzyme的核心包
  • react-test-renderer是React的渲染工具，它可以将React组件渲染为虚拟DOM树进行测试
  • enzyme-adapter-react-16是适配器，Enzyme需要和React版本对应的适配器才能正常工作

配置Jest和Enzyme

在React项目中，如果使用了create-react-app创建的项目，那么Jest和Enzyme已经集成好并且自动配置了。

在一般的React项目中，需要增加Jest的配置文件，在项目根目录下创建jest.config.js文件，内容如下：

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

这里使用testEnvironment: "jsdom"告诉Jest我们使用JSDOM作为测试环境，这使得我们可以在Node.js环境中测试浏览器内置的API。setupFilesAfterEnv选项允许您在运行测试之前运行一些设置代码，这里我们调用了一个额外的Jest配置文件jest.setup.js。

在项目根目录下创建jest.setup.js文件，并添加以下代码：

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

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

这个文件用于引入Enzyme和适配器。现在，在编写测试代码之前，Jest和Enzyme已经准备好了。

使用Jest和Enzyme进行测试

我们将从简单的组件测试开始，首先来看看如何测试一个Button组件。我们先创建一个Button组件，代码如下：

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

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

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

现在我们的目标是测试这个组件。为了测试这个Button组件，我们需要编写一个测试用例。如果您还没有测试目录，可以在项目根目录下创建一个新文件夹__tests__，这是Jest默认的测试文件夹。

在__tests__文件夹下创建一个名为Button.test.js的文件，然后添加以下代码：

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

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

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

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

这里我们使用shallow函数来将Button组件浅渲染为一个包含DOM节点的渲染结果对象。第一个测试检查渲染结果是否包含一个button标签和显示“Click Me”的文本，第二个测试检查当单击按钮时，点击函数是否被调用。

针对异步码进行测试

当我们需要测试异步操作时，我们可以使用setTimeout模拟网络请求或API调用。在这个例子中，我们将创建一个组件和一个带有异步函数的实用函数。

首先，我们创建一个组件AsyncComponent，代码如下：

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

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

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

现在我们将创建一个测试我们的异步函数的实用函数fetchData。我们的函数将从API加载数据，因此我们将使用Jest的mock功能来模拟类似API的响应。我们将在__mocks__文件夹下创建一个fetch.js的模拟代码。这里我们使用了一下代码：

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

现在我们已经有了模拟响应的代码，我们可以编写测试用例。我们需要实例化一个AsyncComponent，然后加载数据并在每个测试用例中检查状态。代码如下：

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

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

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

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

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

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

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

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

这里我们使用了mount函数来将整个组件卸载到DOM中，以便异步处理能够正常工作。第一个测试检查渲染结果是否包含“Loading…”，第二个测试检查当API调用失败时，是否呈现错误状态，第三个测试检查当API调用成功时是否呈现正确的数据。

总结

使用Jest集成Enzyme进行React前端测试是一个简单而有效的方式，这些工具的灵活性和速度可以有效地提高测试质量和开发效率。在编写测试代码时，应确保测试覆盖所有关键路径和异步操作，以确保代码的可靠性和性能。

示例代码：

Button.js

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

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

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

Button.test.js

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

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

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

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

AsyncComponent.js

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

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

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

fetchData.js

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

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

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

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

AsyncComponent.test.js

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

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

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

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

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

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

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

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

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

阅读全文

猜你喜欢

  • Redux 中间件之 redux-saga 原理及使用

    在使用 Redux 进行状态管理的过程中，我们经常会使用一些中间件来增强 Redux 的功能，其中之一就是 redux-saga。那么，什么是 redux-saga？它又是如何工作的呢？本文将会详细介...

    5 个月前
  • ES10 中的 String。prototype.trimEnd() 和 trimStart() 方法

    ES10 中的 String.prototype.trimEnd() 和 trimStart() 方法 在 ES10 中，JavaScript 新增了两个字符串方法：String.prototype....

    5 个月前
  • 如何在 Mocha 中测试 iOS 应用程序？

    Mocha 是一个流行的 JavaScript 测试框架，它可以用于测试前端和后端应用程序。但是，如果你需要测试 iOS 应用程序，你可能会想知道如何在 Mocha 中完成这项任务。

    5 个月前
  • 解决 Kubernetes 上展示服务为 Pending 的问题

    在 Kubernetes 中，当我们创建一个服务时，有时候会遇到服务一直处于 Pending 的状态，无法正常访问。这种情况可能是由于各种原因引起的，例如节点资源不足、网络配置错误等。

    5 个月前
  • Koa 中安装 Webpack 的方法

    在前端开发中，Webpack 是一个非常重要的工具，它可以帮助我们打包、压缩和优化前端代码。而在 Koa 中使用 Webpack，可以让我们更加高效地进行开发。本文将介绍如何在 Koa 中安装 Web...

    5 个月前
  • Angular 中使用 Location 进行 URL 管理的方法

    在 Angular 应用程序中，Location 是一个重要的服务，它提供了一种可以在应用程序中管理 URL 的方式。通过 Location 服务，我们可以获取当前 URL 的信息，也可以改变应用程序...

    5 个月前
  • Chai 如何处理跨域问题？

    跨域问题是前端开发常遇到的一个难题，它指的是浏览器限制了从一个源（域、协议、端口）加载另一个源的资源。这个限制是出于安全原因，防止恶意网站窃取用户信息。但是，在某些情况下，我们需要跨域访问资源，比如使...

    5 个月前
  • 如何在 PWA 下实现卡片式布局

    前言 随着移动设备的普及和网络速度的提升，越来越多的网站和应用开始采用 PWA 技术来提高用户体验。而卡片式布局作为一种简洁、直观、易用的设计风格，也越来越受到前端开发者的青睐。

    5 个月前
  • React-Router4.x 原理分析

    React-Router是一个基于React的声明式路由库，可以帮助我们在React应用中管理路由。React-Router4.x是React-Router的最新版本，相比之前的版本，它有很多改进和优...

    5 个月前
  • 在 Custom Elements 中实现复杂用户界面控件

    Custom Elements 是一种 Web Component 标准，它允许开发者创建自定义的 HTML 标签和元素。这些自定义元素能够拥有自己的属性和方法，以及自定义的事件和样式。

    5 个月前
  • 如何使你的网站具备无障碍性

    无障碍性是指网站可以被所有人，包括身体残障者、老年人和视力障碍者等人群所访问和使用。在现代社会中，无障碍性已经成为了一个必要的标准，而在前端开发中，我们也需要关注和实现无障碍性。

    5 个月前
  • 第一次使用 ESLint 进行代码检查

    什么是 ESLint ESLint 是一个 JavaScript 代码检查工具，可以用来检查代码中的语法错误、潜在的问题、风格问题等。它可以帮助我们提高代码质量、减少错误，并且可以根据我们的需求自定义...

    5 个月前
  • Deno 中的 TypeScript 模块化设计分析

    前言 Deno 是一个基于 V8 引擎的 TypeScript 运行时，它允许在浏览器之外的环境中运行 JavaScript 和 TypeScript 代码。与 Node.js 不同的是，Deno 不...

    5 个月前
  • Next.js 应用中如何使用 Redux 和 SSR

    在 Next.js 应用中使用 Redux 和 SSR 可以极大地提高应用的性能和用户体验。本文将介绍如何在 Next.js 应用中使用 Redux 和 SSR，并提供示例代码和指导意义。

    5 个月前
  • 如何更好的调整 CSS Reset 后带来的字体样式？

    在前端开发中，我们常常需要使用 CSS Reset 来重置浏览器默认样式，以便更好地控制页面样式。然而，CSS Reset 会带来一些问题，其中最常见的就是字体样式的改变。

    5 个月前
  • 如何使用 Headless CMS 进行电商搜索优化

    在电商网站中，搜索引擎优化（SEO）是一个非常重要的环节。通过优化搜索引擎，可以提高网站的曝光率和流量，从而为电商网站带来更多的销售机会。而 Headless CMS（无头 CMS）则是一种新型的内容...

    5 个月前
  • Flexbox 详解：快速掌握弹性盒子布局

    弹性盒子布局（Flexbox）是一种用于页面布局的 CSS 技术。它可以让我们更轻松地创建响应式的布局，并且可以使我们的页面更加灵活和可维护。在本文中，我们将深入了解 Flexbox 的基础知识、属性...

    5 个月前
  • Sequelize ORM 入门指南详细解读

    什么是 Sequelize ORM？ Sequelize ORM 是一个 Node.js 环境下的对象关系映射（ORM）工具，它允许你使用 JavaScript 语言来操作关系型数据库（如 MySQL...

    5 个月前
  • ES9 中新增的正则表达式 Property Escapes 的使用方法

    在 ES9 中，正则表达式新增了 Property Escapes 的功能，可以更方便地匹配 Unicode 字符。本文将介绍 Property Escapes 的使用方法，以及其在前端开发中的应用。

    5 个月前
  • 用 ES11 中的 WeakRef 实现缓存

    在前端开发中，缓存是一个非常重要的概念。它可以帮助我们减少网络请求，提高页面性能。但是，缓存也有一些问题，比如内存泄漏等。为了解决这些问题，ES11 中引入了 WeakRef。

    5 个月前

相关推荐

    暂无文章