应用于构建界面的 React 框架因为其组件化的特性和复用性，在前端圈内越来越受欢迎。与此同时，随着项目越来越大，引入测试变得越来越重要。在 React 应用中，Jest 和 Enzyme 已经成为常用的测试工具。
Jest 是 Facebook 开源的一个测试框架，支持执行 JavaScript 代码的单元测试、集成测试和端到端 (E2E) 测试等。它相当于一个集成了所有测试必需功能的单元测试工具。
Enzyme 是 Airbnb 开源的 React 测试库，能够更方便地测试 React 组件的输出结果，支持两种不同的测试方式：浅渲染 (shallow rendering) 和真实渲染 (full DOM rendering)。
在本文中，我们将探讨如何在 React 组件测试中使用 Jest 和 Enzyme 工具的结合方式。
安装 Jest 和 Enzyme
首先，我们需要创建一个 React 项目。使用 create-react-app 创建一个新项目：
npx create-react-app my-app cd my-app
安装依赖：
npm install --save-dev jest enzyme enzyme-adapter-react-16 react-test-renderer
我们可以修改 package.json 文件的 test 属性来指定使用 Jest 进行测试：
{
"scripts": {
"test": "jest"
}
}配置 Jest 和 Enzyme
我们需要在项目中添加 Jest 配置文件 jest.config.js 和 Enzyme 配置文件 setupTests.js。
在 jest.config.js 中，我们需要指定测试所涉及的文件：
module.exports = {
setupFilesAfterEnv: ['./setupTests.js'],
testMatch: [
'<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}',
'<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}'
],
moduleFileExtensions: ['js', 'jsx', 'json', 'node']
};在 setupTests.js 中，我们需要配置 Enzyme：
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });测试组件的渲染和交互
我们可以测试 React 组件的渲染和交互。在本例中，我们要测试一个简单的按钮组件，检查点击事件的正确性。
在 src/components/Button.js 中定义 Button 组件：
import React from 'react';
const Button = ({ label, handleClick }) => (
<button onClick={handleClick}>{label}</button>
);
export default Button;在 src/components/tests/Button.test.js 中测试 Button 组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------ ---- ------------
----------------- ---- -- -- -
----------- ------- ---------- -- -- -
--------------- ----
---
----------- ------- -- -- -
----- ----- - ------ ----
----- ------ - --------------- ------------- ----
-------------------------------------
---
----------- ------- -- -- -
----- ----------- - ----------
----- ------ - --------------- ------------------------- ----
-------------------------
---------------------------------------
---
---在这个测试文件中，我们使用了 shallow 函数来创建一个 Button 组件的虚拟 DOM。它只渲染组件的第一层，即不会渲染组件内部的子组件。这个函数允许我们检查组件的内容和属性。
我们使用 expect 函数来断言组件的输出。在上面的示例代码中，我们检查了组件是否渲染了正确的标签、是否渲染了正确的文本内容、以及是否正确响应 click 事件。
这个测试使用了 jest.fn() 来模拟一个函数的调用，使用 simulate 函数生成一个 click 事件，并测试 handleClick() 函数是否成功被调用。
测试复杂组件
在测试组件时，我们还可以测试非常复杂的组件。例如，在 src/components/Counter.js 中定义一个 Counter 组件：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
----- ------- - -- -- -
----- ------- --------- - ------------
----- --------- - -- -- -------------- - ---
----- --------- - -- -- -------------- - ---
------ -
-----
----------------
------- ------------------------------
------- ------------------------------
------
--
--
------ ------- --------在 src/components/tests/Counter.test.js 中测试 Counter 组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ ------- ---- -------------
------------------ ---- -- -- -
--- --------
------------- -- -
------- - -------------- ----
---
----------- ------- ---------- -- -- -
--------------------------------------------
---
-------------- ------- -- -- -
-----------------------------------------------
--------------------------------------------
---
-------------- ------- -- -- -
-----------------------------------------------
---------------------------------------------
---
---在这个测试中，我们使用了 mount 函数来创建 Counter 组件的真实 DOM。根据测试需求，我们可以使用 simulate 函数模拟加法和减法事件，并验证计数器的输出。
总结
在 React 开发中，Jest 和 Enzyme 已经成为前端开发师的常用测试工具。使用 Jest 和 Enzyme 可以测试组件的渲染、行为和交互，并能够更好地保证代码质量。
本文介绍了如何在 React 组件测试中使用 Jest 和 Enzyme 工具结合的方式，包括安装、配置、渲染和交互等相关知识点。感谢您的阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6462b9c2968c7c53b03d6bf3