React 是现代 Web 前端开发中非常流行的一种 JavaScript 框架，它帮助前端开发人员构建可重用、可维护、高性能的 Web 应用程序。而 Enzyme 和 Jest 则是 React 生态系统中两个重要的测试工具。在本篇文章中，我们将学习如何使用这三个工具进行开发和测试。下面将分别介绍这些工具的基本概念以及如何在 React 项目中使用它们。
React 入门
React 是一个用于构建 Web 应用程序的 JavaScript 库。它提供了一种声明式、组件化的方式来组织并构建用户界面，使得开发人员可以更快速、更高效地开发交互性应用程序。React 应用程序由多个组件组成，每个组件都可以定义自己的状态和行为，然后组合在一起创建完整的应用程序。React 还提供了虚拟 DOM 和生命周期方法等功能，使得开发人员可以管理和更新组件状态，并对应用程序进行优化。
Enzyme 入门
Enzyme 是一个针对 React 应用程序的 JavaScript 测试工具库。它提供了一些用于测试 React 组件的语法糖和实用方法，使得开发人员可以轻松地编写高效的单元和集成测试。Enzyme 支持模拟组件状态和交互（包括点击、输入等），以及实现渲染、查找组件等功能。具有轻量、易于使用等特点，适合前端开发人员为他们的应用程序编写测试。
Jest 入门
Jest 是一个面向 JavaScript 应用程序的跨平台测试运行器，由 Facebook 开发。它支持针对 React 应用程序的单元测试、集成测试和功能测试，并提供了自动化测试、代码覆盖率和快照测试等功能。Jest 支持使用 TypeScript 进行测试，并集成了自动化测试和 CI/CD 工具，可与其他工具集成使用。
React + Enzyme + Jest 开发
React + Enzyme + Jest 开发模式主要包含以下几个方面：
安装 React + Enzyme + Jest
首先，我们需要安装 React、Enzyme和 Jest。我们可以使用 npm 或 yarn 来安装这些依赖：
npm install --save-dev enzyme jest enzyme-adapter-react-16
或者使用 yarn 进行安装：
yarn add --dev enzyme jest enzyme-adapter-react-16
此处我们使用 enzyme-adapter-react-16 来对 React 16 进行适配，对于其他版本的 React 应用程序也需要安装对应版本的适配器。
配置 Enzyme 和 Jest
我们需要在项目的测试配置文件 jest.config.js 中配置 Enzyme 和 Jest。这里提供一个简单的例子：
-- -------------------- ---- -------
-------------- - -
------------------- -----------------------
---------- --------------------------------------------
----------------- -
----------------- ------------------------------
--
--------------------- -------
-------- ------------------
--在其中，我们指定了 setup.js 即为 Enzyme 的初始化脚本：
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });同时，还指定了 Jest 进行测试的文件路径和所需的资源。此外，我们还指定了样式文件的 mock 文件，来避免在测试中加载真正的样式文件。
编写组件测试
在 React 应用程序中，我们通常需要编写多个组件来构建应用程序的 UI。使用 Enzyme 和 Jest，我们可以编写针对这些组件的测试代码，并对其进行测试。例如，对于简单的按钮组件，我们可以编写如下测试代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ ------ ---- -----------
------------------ -- -- -
---------- ---- ------- ------- ---- --------- -- -- -
----- -------------- - ----------
----- ----- - -
-------- ---------------
----- ------ ----
--
----- ------ - ------------- ---------- ----
-------------------------
------------------------------------------------
---
---在其中，我们首先导入了 React、Enzyme 和 Button 组件。然后，我们使用 Jest 进行测试描述并以 it 的格式进行描述，测试点击按钮后是否能够触发 onClick 事件并只调用一次函数。我们使用 jest.fn 来模拟 onClick 函数，并将其作为 props 传递给 Button 组件。接着，使用 mount 函数对 Button 组件进行渲染，模拟点击事件后进行判断是否触发了模拟的函数并仅仅调用了一次。
执行测试
在编写好测试代码后，我们需要对其进行执行并进行测试。我们可以通过以下两种方式执行测试。
使用 npm 或 yarn 脚本
在 package.json 中，我们可以添加如下脚本：
"scripts": {
"test": "jest"
},在其中，我们定义了一个 alias 为 test 的执行命令，其实际执行为 jest 命令。我们可以通过在终端中执行 npm run test（或 yarn test）来运行测试。
使用 CLI 命令
我们也可以在终端中直接使用 CLI 命令运行 Jest 测试：
jest
Jest 将会自动搜索测试并开始运行测试。
总结
在本文中，我们介绍了 React、Enzyme 和 Jest 这三个工具，并演示了如何使用它们进行开发和测试。React + Enzyme + Jest 开发模式可帮助我们构建可重用、高性能的 Web 应用，并保证应用的正确性。它具有易用、高效、自动化等优点，适合前端开发人员在他们的 Web 应用程序中使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648fae6d48841e9894dd818b