Jest+Enzyme 浅谈：React 单元测试入门
在前端开发中，单元测试是一个非常重要的环节，可以确保代码的可靠性和稳定性。而 React 作为一款流行的前端框架，其单元测试也日渐受到关注，其中 Jest 和 Enzyme 是测试 React 组件最流行的工具。
本文将为大家介绍 Jest 和 Enzyme 的基本用法，帮助大家入手 React 组件的单元测试。
一、Jest 简介
Jest 是 Facebook 推出的一款 JavaScript 测试框架，专注于简单易用，可快速上手。它内置了测试运行器、断言库和覆盖率报告工具等功能，可以帮助开发者快速编写和执行测试用例。
除了可以测试 React 组件外，Jest 还支持测试 Node.js 应用、浏览器脚本等 JavaScript 相关的内容。
二、Enzyme 简介
Enzyme 是 Airbnb 推出的一款 React 组件测试工具，是对 React Test Utils 的封装和扩展，其 API 易于理解和操作。
Enzyme 支持断言库 chai、jasmine 和 expect，可以满足不同开发者的需求。
三、Jest 和 Enzyme 的基础用法
在实际的项目中，Jest 和 Enzyme 常常被一起使用，下面我们将介绍它们的基本用法。
- 安装 Jest 和 Enzyme
首先我们需要使用 npm 安装 Jest 和 Enzyme：
npm install --save-dev jest enzyme enzyme-adapter-react-16
- 配置 Jest
Jest 需要一个配置文件，我们可以新建一个 jest.config.js 文件来配置 Jest：
-- -------------------- ---- -------
-------------- - -
-------- -----
------ - --------------- --
---------- -
-------------- ----------
--
---------- ---------------------------------------------
--------------------- - ----- ------ ----- ------ ------- ------ --
------------------- ---------------------------------
--上述代码主要是配置了测试文件存放的目录、代码路径映射、转换器、测试文件名等等。
- 配置 Enzyme
Enzyme 同样需要配置，我们新建一个 test/setupTests.ts 文件来配置 Enzyme：
/* eslint-disable */
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });上述代码中，我们 import 了 Enzyme 和 Adapter，然后对 Enzyme 进行了配置。
- 编写测试用例
针对一个 React 组件，我们通常会考虑以下几个方面的测试：
- 组件是否渲染正常
- 组件的交互是否正常
- 组件 props 的传递和解析是否正确
下面我们来看下一个完整的测试用例：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------- - ---- ---------
------ --- ---- ---------
--------------- -- -- -
----------- ------- ---------- -- -- -
----- --- - ------------------------------
-------------------- --- -----
-----------------------------------
-------------------------------------
---
---------- --- --- ------ ------ -- -- -
----- ------- - ------------ ----
----- ----- - ----------------------
----- ------ - -----------------------
------------------------ - ------- - ------ ------ ----- - ---
-------------------------------------------- ------ ------ ------ ------- ------------ ----
-------------------------
-------------------------------------------- ------ ------ ------ ------- ------ ----
---
---上述代码中，我们编写了两个测试用例，第一个用例测试了组件是否可以被正常渲染，第二个用例测试了组件交互是否正常。
其中，我们使用了 shallow 方法来渲染一个组件，这个方法只会渲染组件的一层，便于测试组件的状态和属性。simulate 方法可以模拟用户的操作，例如改变 input 的值、点击 button 等。
- 运行测试
一切准备就绪后，我们可以使用以下命令来运行测试：
npm run test
在控制台里可以看到测试结果和代码覆盖率报告。
四、总结
在这篇文章中，我们一步步介绍了 Jest 和 Enzyme 的基础用法，希望能够帮助大家入门 React 单元测试。当然，这并不是单元测试的全部，只是涉及了一部分内容。
最后，我建议大家在开发任何项目前都编写一些测试用例，这能够帮助你更好地理解代码、发现问题并加以解决。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645b4c79968c7c53b0da5f29