在现代 web 开发中，前端技术已经成为了软件开发中不可分割的一部分。在 web 前端开发中，jQuery 和原始的 JavaScript 越来越难以满足业务需求，因此，React 这种针对组件化开发的框架变得越来越受欢迎。随着 React 的流行，测试也成为了 web 前端开发中的重要成分，而单元测试是测试中的重要组成部分之一。本文将会介绍如何在 Enzyme 中模拟 React 组件的单元测试。
环境设置
首先需要安装以下两个包：
--- ------- ---------- ------ --- ------- ---------- -----------------------
Enzyme 是一个 React 组件测试工具，它支持模拟渲染，浅层渲染和 DOM 渲染等多种测试方式，可以用于单元测试和集成测试等场景。而 enzyme-adapter-react-16 是与 React 16 版本兼容的适配器。
然后需要创建 enzyme.js 文件，在其中配置 adapter 和 global 应用：
------ ------ ---- --------- ------ ------- ---- -------------------------- ------------------ -------- --- --------- ---
最后，在 package.json 文件中配置 Jest 的测试环境：
------- - ------------------ -------- -
测试套件
测试套件是指一组针对特定代码单元的测试集合。在 React 组件单元测试中，测试套件一般由两部分组成：
- 测试用例（test cases）：对 React 组件包含的代码单元进行单独测试的测试代码段。
- 测试文件（test files）：用来组织测试用例并配置测试环境的测试代码档案。
接下来，我们将以一个简单的 React 组件为例，介绍如何写测试套件。
React 组件
以下是一个简单的 React 组件，它是一个输入框组件，用户可以在输入框输入信息，并点击按钮将信息添加到列表中：
------ ------ - --------- - ---- --------
----- ----- ------- --------- -
------------------ -
-------------
---------- - - ----- -- --
----------------- - -----------------------------
---------------- - ----------------------------
-
------------------- -
--------------- ----- ------------------ ---
-
------------- -
----- - ---- - - -----------
----- - ----- - - -----------
------------
--------------- ----- -- ---
-
-------- -
----- - ---- - - -----------
------ -
-----
------ ----------- ------------ ---------------------------- --
------- ---------------------------------------
------
--
-
-
------ ------- ------测试用例
测试用例是一个小的代码段，它可以测试 React 组件的单个行为或方法。以下是一个测试用例，它测试了输入框组件 Input 的 handleClick() 方法：
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----- ---- ----------
--------------- ----------- -- -- -
---------- ---- ----- ---- ---- ----- ---- ------ -- --------- -- -- -
----- --------- - ----------
----- ------- - -------------- ----------------- ----
----- ---- - -------
------------------ ---- ---
-----------------------------------------
-------------------------------------------
---------------------------------------------
------------------------------------------
---
---首先，我们使用 Jest 的 describe() 函数创建一个测试套件，并描述组件（Input component）。在测试用例中，使用 Jest 提供的 mock function onAddMock 模拟组件中的 onAdd() 方法。然后，我们创建一个被封装的 Input 组件，同时将模拟函数作为 prop 传递给组件。模拟函数可以记录它是否被调用，以及被调用时的参数。
接下来，我们设置组件的 text state 值为 'test'。然后，使用 enzyme-shallow 测试工具在隔离的环境中模拟组件的 click 事件。最后，我们在断言中测试模拟函数是否被调用，是否被调用时携带了正确的参数，并测试 state 是否被正确更改。
结论
测试可以让我们更自信地编写代码，并确保每次更改代码时不会意外破坏旧代码。在 React 组件开发中，测试是不可或缺的一部分，它可以让我们更好地理解代码，更高效地修复 bug，同时还可以让我们开发更可维护的代码。使用 Enzyme 进行 React 组件单元测试是很简单的，透彻地了解 React 组件的生命周期和状态变化可以帮助我们更好地编写测试用例，并使我们的测试套件更完备。
示例代码
- Github 代码仓库：https://github.com/Fudan-ZJH/react-input-test-demo
- 代码演示：https://codesandbox.io/s/react-input-test-demo-s2gj8
- 参考资料：
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672203372e7021665e09e8a3