在上一篇文章中，我们学习了关于React和测试基础知识。现在，我们将进一步探讨React测试框架--Jest和Enzyme的入门指南。
Jest简介
Jest是一个由Facebook维护的JavaScript测试框架，旨在使测试变得快速、简单和有趣。Jest结合了Jasmine和Karma的功能，为React项目提供了一种简单而强大的测试方式。
Jest的优势
- 快速：Jest使用运行时缓存来加快测试执行速度，并在不必要的测试同时提供并行测试。
- 简单：Jest很容易使用，提供了模拟函数、快照测试以及与Babel、TypeScript等的集成。
- 有趣：Jest通过可视化UI显示测试结果，使测试变得更加有趣。
Jest的安装
使用npm，可以在项目中安装Jest：
npm install jest --save-dev
Jest的配置
在项目中创建一个jest.config.js文件，配置jest的参数：
module.exports = {
preset: 'jest-preset-react',
verbose: true
}其中，preset是定义的测试环境，verbose则是测试报告的详细程度。
Enzyme简介
Enzyme是一个React测试实用程序库，由Airbnb开发并维护。它提供了浅（shallow）渲染、实际的DOM渲染以及仿真事件，这些都可以帮助React开发人员有效地测试他们的代码。
Enzyme的优势
- 轻松测试组件：Enzyme可以让你轻松检查React组件的渲染输出，以及能够与使用了React组件的外部组合在一起的组件交互。
- 快速：由于Enzyme使用了浅渲染，因此测试运行速度相对较快。
- 兼容多种环境：除了React，Enzyme还兼容了其他一些UI JavaScript库，如Angular和Vue.js。
Enzyme的安装
使用npm，可以在项目中安装Enzyme：
npm install enzyme --save-dev
同时，还需要安装enzyme-adapter-react-16，用于在React 16及以上版本上测试React组件：
npm install enzyme-adapter-react-16 --save-dev
Enzyme的配置
在项目中创建一个setupTests.js文件，配置Enzyme的适配器：
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({adapter: new Adapter()});示例
下面是一个简单的示例代码，使用Jest和Enzyme对React组件进行测试：
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- ---------
------ --- ---- --------
------------- ------- -- -- -
----------- --- ----------- -- -- -
----- ------- - ------------ ----
---------------------------------- -- ------------
---
---------- --- ------ ------ -- -- -
----- ------- - ------------ ----
---------------------------------------------------- ----- -- ------------
---
------------- ----- ----- -- ------ --- ----- --------- -- -- -
----- ------- - ------------ ----
-----------------------------------------------------
-----------------------------------------
----------------------------------------------------- -- -------------------
---
---在上面的示例中，我们测试了三个方面：组件的渲染输出、按钮文本以及按下按钮触发的事件是否改变了计数器的值。运行测试，如果一切正常，将会看到：
-- -------------------- ---- -------
---- -------------
--- -----
- ------- --- --------- ------
- ------ --- ------ ---- -----
- --------- ----- ----- -- ------ --- ----- ------- -----
---- ------- - ------- - -----
------ - ------- - -----
---------- - ------- - -----
----- ------
--- --- ---- -------总结
在本篇文章中，我们学习了Jest和Enzyme的概述、安装过程、配置以及一个简单的测试示例。使用这两个强大的测试工具，可以轻松创建和执行测试，并保证React项目的质量和完整性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6455a875968c7c53b09174a4