Jest 和 Enzyme 都是 JavaScript 测试框架，它们都可以用来测试前端应用。Jest 是 Facebook 开源的一款测试框架，具有简单易用的特点，内置了断言库、测试运行器以及模拟器等功能；Enzyme 是 Airbnb 开源的一款 React 测试工具，可以方便地测试 React 组件的渲染和交互行为。在实际应用中，Jest 和 Enzyme 也可以协同使用，以保证前端应用的质量和稳定性。
Jest 的基本使用
Jest 是基于 JavaScript 的测试框架，在使用之前需要先安装。可以使用 npm 命令行工具，在项目目录下执行以下命令：
npm install jest --save-dev
安装完成之后，可以在 package.json 文件中添加以下配置：
"scripts": {
"test": "jest"
}这样运行 npm test 命令即可使用 Jest 运行测试。
Jest 的测试文件默认存放在项目根目录下的 __tests__ 文件夹中，并以 .test.js 或 .spec.js 后缀结尾。例如，我们可以新建一个 sum.test.js 文件，其中写入以下代码：
function sum(a, b) {
return a + b;
}
test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
});在命令行执行 npm test，可以看到以下输出：
PASS __tests__/sum.test.js ✓ adds 1 + 2 to equal 3 (3ms) Test Suites: 1 passed, 1 total Tests: 1 passed, 1 total Snapshots: 0 total Time: 2.374s, estimated 3s Ran all test suites.
可以看到，Jest 执行了我们编写的测试用例，并输出了测试结果。
Enzyme 的基本使用
Enzyme 是 React 的测试工具，需要先安装 React 才能使用。可以使用 npm 命令行工具，在项目目录下执行以下命令：
npm install react react-dom enzyme enzyme-adapter-react-16 --save-dev
其中，enzyme-adapter-react-16 是 Enzyme 与 React 16.x 兼容的适配器。
安装完成之后，在项目目录下的 src 目录中我们可以新建一个名为 App.js 的文件，写入以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
----- --- ------- --------------- -
------------------ -
-------------
---------- - -
------ -
--
-
-------- -
------ -
-----
---------------------------
------- ----------- -- --------------- ------ ---------------- - - ----
-------- -----
---------
------
--
-
-
------ ------- ----这是一个简单的 React 组件，包含了一个计数器和一个增加计数器的按钮。
接下来，我们可以新建一个 App.test.js 文件，使用 Enzyme 对组件进行测试。在该文件中，我们可以写入以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ --- ---- --------
------------- ----------- -- -- -
---------- -------- ----- ---- ----- -------- -- -- -
----- ------- - ------------ ----
----- ------ - -----------------------
-------------------------
----- ---- - --------------------------
--------------------------
---
---在这个文件中，我们先使用 shallow 函数来渲染 App 组件，并找到按钮元素。然后模拟按钮的点击事件，再次查找计数器元素，判断它是否等于 1。
在命令行执行 npm test，可以看到以下输出：
-- -------------------- ---- -------
---- ---------------
--- ---------
- ------ -------- ----- ---- ----- ------ ------
---- ------- - ------- - -----
------ - ------- - -----
---------- - -----
----- ------
--- --- ---- -------可以看到，Enzyme 执行了我们编写的测试用例，并输出了测试结果。
Jest 和 Enzyme 都可以用来测试前端应用，但它们的功能定位不同，Jest 更多是作为一个测试框架，而 Enzyme 更多是作为一个 React 测试工具。因此，Jest 和 Enzyme 的协同使用可以更好地测试前端应用的各个方面。
在协同使用的过程中，我们可以先使用 Jest 对非 React 的部分进行测试，再使用 Enzyme 对 React 组件进行测试。例如，我们可以新建一个 utils.test.js 文件，编写以下代码：
import { sum } from './utils';
describe('utils', () => {
test('should add 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
});
});在这个文件中，我们测试了一个名为 sum 的工具函数。
然后，我们可以再新建一个 App.test.js 文件，使用 Enzyme 对组件进行测试。与之前的测试用例类似，我们可以模拟按钮的点击事件，判断计数器是否正确增加。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ --- ---- --------
------------- ----------- -- -- -
---------- -------- ----- ---- ----- -------- -- -- -
----- ------- - ------------ ----
----- ------ - -----------------------
-------------------------
----- ---- - --------------------------
--------------------------
---
---在命令行执行 npm test，可以看到以下输出：
PASS __tests__/utils.test.js PASS src/App.test.js Test Suites: 2 passed, 2 total Tests: 2 passed, 2 total Snapshots: 0 total Time: 2.430s Ran all test suites.
可以看到，Jest 和 Enzyme 协同使用，保证了前端应用的质量和稳定性。
总结
Jest 和 Enzyme 都是 JavaScript 测试框架，它们可以协同使用来测试前端应用的各个方面。Jest 和 Enzyme 的功能定位不同，Jest 更多是作为一个测试框架，而 Enzyme 更多是作为一个 React 测试工具。在协同使用的过程中，我们可以先使用 Jest 对非 React 的部分进行测试，再使用 Enzyme 对 React 组件进行测试。这样可以更好地保证前端应用的质量和稳定性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651b8d2b95b1f8cacd3332b8