React 是一个广泛使用的前端框架，被许多企业和开发者所采用。为了保证 React 代码的质量，我们需要使用单元测试来测试我们构建的组件。Jest 和 Enzyme 是测试 React 组件的两个最常用的工具。在本篇文章中，我们将深入介绍如何在 React 中使用 Jest 和 Enzyme 进行单元测试，并通过示例代码展示如何运用。
Jest
Jest 是一个流行的 JavaScript 测试框架，用于在项目中编写简单而有效的单元测试。它支持各种测试场景，包括快照测试、异步测试和测试覆盖率等，Jest 的高度自动化使得我们能够在很短的时间内编写出许多的测试用例。
Enzyme
Enzyme 是一个由 Airbnb 开发的 React 测试工具库，它可以帮助开发者在不依赖于浏览器的情况下测试 React 组件的输出和交互。Enzyme为 React 组件提供了多种测试方法，包括浅层渲染、全渲染和模拟用户操作等，这使得组件测试更加便捷。
安装 Jest 和 Enzyme
在开始使用 Jest 和 Enzyme 测试我们的 React 应用程序之前，我们需要先安装它们。我们可以通过以下命令使用 NPM 安装：
--- ------- ---------- ---- ------ -----------------------
- jest：安装 Jest 测试框架。
- enzyme：安装 Enzyme 测试工具库。
- enzyme-adapter-react-16：安装用于适配 React 16 版本的 Enzyme 适配器。
同时，我们还需要在项目的根目录中创建一个 setupTest.js 文件来引入 Enzyme 适配器和全局配置。在 setupTest.js 文件中，添加以下代码：
------ - --------- - ---- --------- ------ ------- ---- -------------------------- ----------- -------- --- --------- ---
我们还需要在项目的 package.json 文件中添加以下测试用例脚本：
------- ------- ---------------- ----- -----------
接下来，我们就可以在项目中愉快地使用 Jest 和 Enzyme 进行单元测试了。
测试 React 组件
让我们来看一下如何使用 Jest 和 Enzyme 测试 React 组件。以下是一个基本的 React 组件，该组件包含一个输入框和一个按钮，它接受一个 props updateText，当按钮被点击时，该 props 将会被调用：
------ ------ - -------- - ---- --------
-------- ----- ---------- -- -
----- ------ -------- - -------------
----- ----------------- - -- -- -
-----------------
--
------ -
-----
------ ------------ ----------------- -- ---------------------------- --
------- -------------------------------------------
------
--
-
------ ------- ----我们将测试用例放在一个名为 app.test.js 的单独文件中。在测试用例中，我们需要测试它接受 props，调用 props 中的函数并更新状态。以下是测试代码的例子：
------ ----- ---- --------
------ - ------- - ---- ---------
------ --- ---- --------
--------------- -- -- -
----------- -- ----- --------- -- -- -
----- ------- - ------------ ----
----------------------------------------------
---
----------- - ------ --------- -- -- -
----- ------- - ------------ ----
-----------------------------------------------
---
----------- --- ---- ----- ---- ------ -- --- ------- -- -- -
----- ------- - ------------ ----
---------------------------------------- - ------- - ------ ------- - ---
-----------------------------------------------
---
--------- ---------- ---- --- ----- ------ -- -- -
----- ---------- - ----------
----- ------- - ------------ ----------------------- ----
------------------ ----- ------- ---
-----------------------------------------
-------------------------------------------------
---
---在上面的测试用例中，我们创建了四个测试用例，这些测试用例分别测试组件是否正确地渲染了输入框和按钮、输入框的value state 是否能够被更新，以及点击按钮是否能够调用 updateText 函数并更新状态。这些用例演示了使用 Jest 和 Enzyme 编写 React 单元测试的基本技巧。
测试覆盖率
在验证代码的正确性时，我们不仅应该关注代码是否能够实现特定的功能，还应该关心代码被测试的覆盖面。由于 Jest 与测试覆盖率非常搭配，你可以很方便地测量你的代码被多少行测试所覆盖。在安装 Jest 库时已经附带了 coverage 选项，我们可以使用 npm run test:coverage 命令在终端中运行它。测试结果中将包含有关每个文件的测试覆盖率信息。
总结
Jest 和 Enzyme 是 React 单元测试过程中最常用的两个工具，它们具有许多有用的测试方法。本篇文章中，我们详细介绍了如何在 React 中使用 Jest 和 Enzyme 进行单元测试，并通过示例代码演示了它们的使用。当我们开发 React 应用程序时，使用 Jest 和 Enzyme 来测试组件可以提高代码的质量，减少后续的调试时间和改进周期。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/653d1b277d4982a6eb6fd284