随着前端开发的不断发展，单元测试已经成为了不可或缺的一部分。React 作为目前非常流行的前端框架之一，其单元测试框架也倍受关注。本文将介绍 Jest 和 Enzyme 这两个常用的 React 单元测试框架，并且提供一些代码示例。
Jest
Jest 是 Facebook 开发的一个测试框架，主要用于 React 应用程序的单元测试。它是一个集成式测试框架，支持断言、自己运行的测试环境、快照测试和全局模拟等功能。
安装和使用
首先，需要安装 Jest：
npm install jest --save-dev
然后，创建一个名为 sum.js 的文件，用于测试。代码如下：
function sum(a, b) {
return a + b;
}
module.exports = sum;接下来，创建一个名为 sum.test.js 的文件，用于编写 Jest 测试代码。代码如下：
const sum = require('./sum');
test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
});最后，在 package.json 中添加以下命令：
"scripts": {
"test": "jest"
}接下来，运行命令 npm run test 即可执行测试。
Jest 快照测试
Jest 还支持快照测试功能。它允许开发人员可视化地比较两个数据结构。快照测试允许您检查 DOM 元素，React 组件树或任何其他复杂数据结构。
下面是一个示例，用于测试 React 组件：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ---------------------- ------ --- ---- -------- --------- -------- -- -- - ----- --------- - -------------------- ---- --- ---- - ------------------- ------------------------------- ---
执行快照测试之后，会在项目根目录下生成一个名为 __snapshots__ 的目录，其中包含每个组件的快照。
Enzyme
Enzyme 是 Airbnb 开发的一个测试工具，用于 React 应用程序的单元测试。它提供了一组用于测试 React 组件的 API。
安装和使用
首先，需要安装 Enzyme：
npm install enzyme --save-dev
然后，创建一个名为 sum.js 的文件，用于测试。代码如下：
function sum(a, b) {
return a + b;
}
module.exports = sum;接下来，创建一个名为 sum.test.js 的文件，用于编写 Enzyme 测试代码。代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ --- ---- --------
-------------- ---- -- -- -
---------- --- --- --------- -- -- -
----- ------- - ------------ ----- ----- ----
-----------------------------------------------
---
---最后，在 package.json 中添加以下命令：
"scripts": {
"test": "jest"
}接下来，运行命令 npm run test 即可执行测试。
Enzyme 属性测试
Enzyme 还支持属性测试，也就是测试特定组件实例的属性。下面是一个示例，用于测试包含输入框和按钮的表单组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ---------- ---- ---------------
--------------------- ---- -- -- -
---------- ------ -- ----- --- ------ ---------- -- -- -
----- ------- - ------------------- ----
----------------------------------------------
-----------------------------------------------
---
---------- ---- ----- -- ------- -- -- -
----- ------- - ------------------- ----- ----
-------------------------------------------------------
---
---------- ---- ------- -------- ---- ------ -- --------- -- -- -
----- ------- - ----------
----- ------- - ------------------- ----------------- ----
-----------------------------------------
-----------------------------------
---
---在这个示例中，我们测试了组件是否渲染了正确数量的子元素、组件是否正确地接收了props以及组件中按钮的功能是否如预期那样。
结论
总的来说，Jest 和 Enzyme 都是非常流行且功能强大的 React 单元测试框架。Jest 是针对整个应用程序的集成式测试框架，支持多种功能，包括快照测试、全局模拟等。Enzyme 是一个提供一组 API 用于测试 React 组件的工具，支持属性测试等功能。
希望本文能够帮助您了解这两个测试框架，并且可以使用它们来提高您的 React 代码的质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672f22b0eedcc8a97c8ccf29