使用 Enzyme 和 Jest 快速测试 React 应用程序
前端开发者在开发 React 应用程序时,如何保证代码的质量和功能的可靠性是一个必须要面对的难题。一个好的测试工具可以有效地解决这个问题。这篇文章将介绍如何使用 Enzyme 和 Jest 这两个流行的 React 测试工具,帮助我们快速地实现 React 应用程序的测试。
Enzyme
Enzyme 是一个由 Airbnb 开源的 React 测试工具,它可以帮助我们快速和灵活地测试 React 组件。Enzyme 具有以下几个特点:
可以模拟 React 组件的渲染和交互过程,使得测试代码尽可能接近真实环境。
提供了多种 API 用于轻松定位和查询组件中的元素,从而方便测试组件的状态和交互。
支持多种测试方式,例如快照测试、单元测试、集成测试等。
安装和配置 Enzyme
要使用 Enzyme 进行测试,我们需要先安装它以及 React 和 Jest。
npm install --save-dev enzyme enzyme-adapter-react-16 enzyme-to-json \ react react-dom jest
然后在 Jest 的配置文件中进行配置:
{ "jest": { "setupFilesAfterEnv": ["<rootDir>/src/setupTests.js"] } }
在 src/setupTests.js 文件中进行 Enzyme 的初始化和配置:
// src/setupTests.js import { configure } from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; import toJson from 'enzyme-to-json'; configure({ adapter: new Adapter() }); expect.addSnapshotSerializer(toJson);
这样就完成了 Enzyme 的安装和配置,我们现在可以开始实际测试 React 组件了。
测试组件状态
首先,我们来看看如何测试一个普通的 React 组件的状态。下面是一个简单的计数器组件:
-- -------------------- ---- ------- ------ ------ - -------- - ---- -------- -------- --------- - ----- ------- --------- - ------------ -------- ------------- - -------------- - --- - ------ - ----- -------- ------ ----------- ------- --------------------------------- ------ -- - ------ ------- --------
我们可以使用 Enzyme 的 shallow 函数来浅渲染 Counter 组件并查询其中的状态:
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- - ---- --------- ------ ------ ---- ----------------- ------ ------- ---- ------------ ----------------- ----------- -- -- - -------------- --- ------- -- -- - ----- ------- - ---------------- ---- ----- ---- - ------------------------- --------------------------- ------ ---- ----------------------------------------- ----- ----------- - ------------------------- ---------------------------------- ------ ---- ------------------------------------------ --- ---
shallow 函数将 Counter 组件假装成它所包含的 DOM 树的展开结果,并返回一个对象来代表它。我们可以使用 find 方法来查找 Counter 子元素中的元素并查询其文本。simulate 方法可以模拟用户交互,通过触发 click 事件来增加计数器。 最后,我们保存快照以便比较。
测试组件交互
接下来,我们来看看如何测试一个响应用户交互的组件。下面是一个简单的表格组件,可以让用户添加、删除、和编辑数据:
-- -------------------- ---- ------- ------ ------ - -------- - ---- -------- -------- ------- - ----- ------ -------- - ----------- ----- -------- ---- -- ---- ----- --------- ----------- - ---------------- ----- ------------ -------------- - ------------- ----- ---------- ------------ - ---------- ----- --- ---- -- --- -------- ----------- - ----------------- ----------- ------------- ----- --- ---- -- --- - -------- ------------------- - ----------------------- -- -- - --- -------- - -------- ----------------- - ----------------- --------------------- ------------------------- - -------- -------------- - ----------------------- ------ -- - -- ------ --- ----------- - ------ --------- - ---- - ------ ----- - ---- ------------- ----- --- ---- -- --- ------------------ ------------------ - ------ - ----- ------- ------- ---- ------------- ------------ ---------------- ----- -------- ------- ---------------- ------ -- - --- ------------ ------------ -- ----- --- ---------- - ------ --------------------- ------------- -- ------------- ------------ ----- -------------- --- -- - --------------- ------------ -- ----- --- ---------- - ------ -------------------- ------------- -- ------------- ------------ ---- -------------- --- -- - -------------- ---- --------- -- ------- ----------- -- ------------------------------- --------- -- ------- ----------- -- --------------------------------- -------- -- ----- --- ---------- -- ------- ----------------------------------- ----- ----- --- -------- -------- --- -- ------- ----- ------ --------------------- ------------- -- ------------- ------------ ----- -------------- --- -- -------- ------- ---- ------ -------------------- ------------- -- ------------- ------------ ---- -------------- --- -- -------- ------- ------------------------------- ------ -- - ------ ------- ------
我们可以使用 mount 方法来完全渲染 Table 组件并查询其中的元素。下面是测试代码,我们使用了 describe 和 it 函数来组织测试用例:
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ----- - ---- --------- ------ ------ ---- ----------------- ------ ----- ---- ---------- --------------- ----------- -- -- - -------- - --- -- --- ----- ---- -------- --- --- -------- -- -- - ----- ------- - ------------ ---- ----- ---- - ------ ----- --- - --- ---------------------------------------------- - ------- - ------ ---- - --- ---------------------------------------------- - ------- - ------ --- - --- ----------------------------------------------- ----- ----------- - ------------------- ------------ ------------------------------- ------------------------------------------ --- ----------- - --- ---- --- ----- ---- -------- --- ------ -------- -- -- - ----- ------- - ------------ ---- ----------------------------------------------- ----- ----------- - ------------------- ------------ ------------------------------- ------------------------------------------ --- --------- - --- ---- -------- --- ---- ------ --- ----- ---- -------- --- ---- -------- -- -- - ----- ------- - ------------ ---- ----- ---- - ---------- ----- --- - --- ----------------------------------------------- ---------------------------------------------- - ------- - ------ ---- - --- ---------------------------------------------- - ------- - ------ --- - --- ----------------------------------------------- ----- ----------- - ------------------- ------------------ ----- ---------- - ------------------- ------------------ ---------------------------------- ------------------------------------------- ------------------------------------------ --- ---
我们使用表格中的三个操作(添加、删除和编辑)分别执行了测试用例。我们可以使用 at 方法和索引来定位不同的元素。在编辑测试中,我们先点击编辑按钮来启动编辑模式,然后输入新的名字和年龄,最后点击保存按钮来保存修改。toMatchSnapshot() 方法用于进行快照测试。
Jest
Jest 是 Facebook 开源的一个 JavaScript 测试框架,它能帮助我们对 JavaScript 代码进行单元测试、集成测试和端到端测试等不同层次的测试。Jest 具有以下几个特点:
自带 test runner 和 assertion 库,无需额外安装库。
提供了代码覆盖率检测、快照测试、异步代码测试等丰富的测试工具。
配置简单、易于使用。
安装和配置 Jest
要使用 Jest,我们需要先安装它以及 React 和 Enzyme。
npm install --save-dev jest babel-jest @babel/preset-env \ @babel/preset-react enzyme enzyme-adapter-react-16 enzyme-to-json \ react react-dom
在项目根目录下创建 jest.config.js 文件,进行 Jest 的配置:
-- -------------------- ---- ------- -------------- - - ---------------- -------- ----------------------- ------------------ ---------- --------------------- ------ ------- ----------------- - ---------------------- --------------------- ------------- ------------------- -------------------- ------------------------------ --------------- ------------------------- -- ------------------- -------------------------------- -------------------- ------------------------------ --
在 src/setupTests.js 文件中进行 Jest 和 Enzyme 的初始化和配置:
// src/setupTests.js import { configure } from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; import toJson from 'enzyme-to-json'; configure({ adapter: new Adapter() }); expect.addSnapshotSerializer(toJson);
Jest 和 Enzyme 都已经配置好了,现在我们可以在项目中编写测试用例。
测试工具和命令
Jest 提供了很多测试工具和命令,这里介绍其中常见的几个:
test :测试命令,用于运行所有测试用例。
describe 和 it :用于组织测试用例,describe 可以用来描述一组测试用例,it 可以用来描述单个测试用例。
expect :用于进行断言。
mock :用于模拟依赖关系并测试代码行为。
snapshot :用于对组件快照进行测试。
快照测试
快照测试是 Jest 中比较有用的一个功能,它可以轻松地创建组件快照并在以后的测试中进行比较。通过快照测试,我们可以确保组件在各种情况下都表现正常。
下面是一个示例代码:
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ---------------------- ------ ----------- ---- ---------------- ----------------------- -- -- - ----------- --------- ---- ---------- -- -- - ----- ---- - ---------------------------- ------------- ------------------------------- --- ----------- --------- ---- ------ ------- -- -- - ----- ---- - ---------------------------- ------------ -------- ------------- ------------------------------- --- ---
这里我们使用了 react-test-renderer 库来快照测试 MyComponent 组件,对比不同组件的快照来确保组件渲染的正确性。toMatchSnapshot 方法用于比较快照。
结论
使用 Enzyme 和 Jest 可以快速、易用地测试 React 应用程序。Enzyme 在测试组件时提供了多种 API,当然 Jest 自带的一些测试工具也非常好用。本文介绍了其中的基础用法和工具,但是基础知识只是开始,后续需要更多的实践和探索才能更好的掌握这两个工具。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/670100520bef792019b0166a