Enzyme+Jest，轻轻松松地学会测试 React
在前端开发中，测试是非常重要的一环。而在 React 开发中，测试则更是必不可少的环节。本文将介绍如何使用 Enzyme+Jest 来轻松地测试 React 组件。
一、什么是 Enzyme 和 Jest？
Enzyme 是一个 React 测试工具库，由 Airbnb 开源。它提供了一些 API，可以方便地模拟组件的渲染、交互和断言组件的输出。
Jest 是 Facebook 开源的一个 JavaScript 测试框架，它可以运行在 Node.js 环境中，支持测试异步代码、生成覆盖率报告等功能。
二、安装 Enzyme 和 Jest
安装 Enzyme 和 Jest 可以使用 npm 命令：
--- ------- ---------- ------ ---- -----------------------
其中，enzyme-adapter-react-16 是 Enzyme 与 React 16.x 版本的适配器。
三、使用 Enzyme 测试组件
以一个简单的按钮组件为例：
------ ----- ---- -------- ----- ------ - -- -------- -------- -- -- - ------- ------------------------------------- -- ------ ------- -------
为了测试这个组件，我们先写一个测试用例：
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------ ---- -----------
------------------ -- -- -
----------- - -------- -- -- -
----- ------- - --------------- ----
-----------------------------------------------
---
----------- ---------- -- -- -
----- ------- - --------------------- -------------
------------------------------------- -----
---
--------- ------- ---- ------ -- --------- -- -- -
----- ----------- - ----------
----- ------- - --------------- --------------------- ----
-----------------------------------------
---------------------------------------
---
---这里我们使用了 shallow 函数来浅渲染组件。shallow 函数只会渲染组件的第一层，而不会渲染子组件。这样可以加快测试的速度。
在第一个测试用例中，我们断言组件渲染了一个 button 标签。
在第二个测试用例中，我们传递了一个 children 属性，断言组件渲染了这个属性值。
在第三个测试用例中，我们模拟了一个点击事件，断言 onClick 函数被调用了。
四、使用 Jest 运行测试
在 package.json 文件中，我们可以添加一个 test 命令：
---------- - ------- ------ -
然后在命令行中运行 npm test，Jest 就会运行所有测试用例，并输出测试结果。
五、总结
使用 Enzyme 和 Jest 可以轻松地测试 React 组件。我们可以使用 Enzyme 提供的 API 来模拟组件的渲染、交互和断言组件的输出；使用 Jest 运行测试用例，并生成覆盖率报告。
代码示例：https://codesandbox.io/s/enzyme-jest-0i9il
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6552c299d2f5e1655dc72f3d