Enzyme 是一个流行的 JavaScript 测试工具，它允许开发者在 React 应用程序中进行功能和集成测试，而无需实际渲染组件。它提供了一个易于使用的 API，可用于模拟和操作 React 组件。在本文中，我们将介绍如何使用 Enzyme 来测试您的 React 应用程序。
环境搭建
在开始测试之前，你需要安装以下软件：
- Node.js：建议使用最新的 Long-Term Support 版本。
- Yarn 或者 npm：用于管理依赖项。
- React：一个可独立运行的 React 应用程序，可以是您正在开发的任何项目。
您需要在项目根目录下执行以下命令：
# 使用 Yarn 安装 Enzyme 和相关依赖项 yarn add --dev enzyme @wojtekmaj/enzyme-adapter-react-17 # 使用 npm 安装 Enzyme 和相关依赖项 npm install --save-dev enzyme @wojtekmaj/enzyme-adapter-react-17
接下来，您需要创建一个名为 setupTests.js 的文件，该文件将在测试时自动运行。我们将在其中配置 Enzyme：
// setupTests.js
import { configure } from 'enzyme';
import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
configure({ adapter: new Adapter() });最后，在 package.json 文件中添加以下脚本：
{
"scripts": {
"test": "jest"
}
}现在，我们已经准备好使用 Enzyme 进行 React 测试！
测试组件
让我们从简单的组件开始。我们将测试一个名为 Button 的组件，该组件根据传递给它的属性渲染不同的文本。以下是该组件的代码：
-- -------------------- ---- -------
-- ---------
------ ----- ---- --------
-------- -------- --------- -- -
------ -
--------
---------- - ------------ - ---------
---------
--
-
------ ------- -------我们将测试是否正确地为组件传递属性，以及是否正确地渲染了相应的文本。
-- -------------------- ---- -------
-- --------------
------ - ------- - ---- ---------
------ ------ ---- -----------
------------------ -- -- -
----------- --- ------ ------ ------ -- -- -
----- ------- - --------------- ----------------- ----
-----------------------------------------------------
---
----------- --- ------- ------ ------ -- -- -
----- ------- - --------------- ---------------- ----
---------------------------------------------------------
---
---上面的测试代码中，我们使用了 shallow 方法，该方法将组件渲染为浅层次的对象，不进行实际渲染或安装子组件。我们提供了两个测试用例，每个用例都创建了一个包含相应属性的组件，并断言渲染的文本是否正确。
测试受控组件
接下来，我们将测试一个受控组件。受控组件是指根据用户输入实时更新其值的组件。我们将测试一个名为 Input 的受控组件，该组件将用户输入限制为 5 个字符并显示输入计数。以下是该组件的代码：
-- -------------------- ---- -------
-- --------
------ ------ - -------- - ---- --------
-------- ------- -
----- ------- --------- - -------------
----- ------------ - ------- -- -
----- -------- - --------------------------- ---
-------------------
--
------ -
-----
------ ------------- ----------------------- --
------------------- - -------
------
--
-
------ ------- ------我们将测试是否正确地更新组件状态并计算输入计数。
-- -------------------- ---- -------
-- -------------
------ - ------- - ---- ---------
------ ----- ---- ----------
----------------- -- -- -
----------- --- ----- -- ----- -------- -- -- -
----- ------- - -------------- ----
----- ----- - ----------------------
------------------------ - ------- - ------ ------- - ---
---------------------------------------------
---
---------- ----- -- - ------------ -- -- -
----- ------- - -------------- ----
----- ----- - ----------------------
------------------------ - ------- - ------ ------ ------ - ---
---------------------------------------------
---
------------ ----- -------- -- -- -
----- ------- - -------------- ----
----- ----- - ---------------------------
---------------------------- - ----
----- ----- - ----------------------
------------------------ - ------- - ------ ------- - ---
---------------------------- - ----
---
---上面的测试代码中，我们使用了 shallow 方法，并使用了 simulate 方法模拟用户输入。我们断言组件状态是否正确地更新，并检查组件是否正确地限制了输入和显示了相应的计数。
测试异步组件
最后，我们将测试一个异步组件。异步组件通过网络检索数据并根据该数据进行渲染，因此需要使用 async 和 await。我们将测试一个名为 User 的异步组件，该组件从 API 中检索用户数据并显示该数据。以下是该组件的代码：
-- -------------------- ---- -------
-- -------
------ ------ - --------- --------- - ---- --------
-------- ----------- -
----- - ------ - - ------
----- ------ -------- - ---------------
------------ -- -
----- -------- ----------- -
----- -------- - ----- -------------------------------------------------
----- ---- - ----- ----------------
--------------
-
------------
-- ----------
-- ------- -
------ ----------------------
-
------ -
-----
-------- ---------------
--------- ----------------
------
--
-
------ ------- -----我们将测试是否正确地显示“正在加载”文本和正确的用户数据。
-- -------------------- ---- -------
-- ------------
------ - ----- - ---- ---------
------ ---- ---- ---------
---------------- -- -- -
----------- --- ------- ------- -- -- -
----- ------- - ----------- ---------- ----
------------------------------------------------------
---
----------- --- ---- ------ ----- -- -- -
----- ---- - - --- -- ----- ----- ----- ------ ------------------ --
------------------ ---------------------------------- --
-----------------
----- -- -- ----------------------
--
--
----- ------- - ----------- ---------- ----
----- ------------------
-----------------
-------------------------------------------------- ---------------
--------------------------------------------------- ----------------
---------------------------
---
---上面的测试代码中，我们使用了 mount 方法，该方法将组件完全渲染，并使用 jest.spyOn 模拟了 API 数据。我们使用 async 和 await 等待异步操作完成，并使用 Promise.resolve 和 wrapper.update 更新组件。我们检查渲染的文本和正确的用户数据是否正确。
总结
通过使用 Enzyme 测试 React 应用程序，我们可以更好地保证代码的质量。无论我们是测试简单的组件还是复杂的受控和异步组件，我们都可以使用 Enzyme 来提高我们的测试效率和准确度。希望这个教程能帮助你更好地理解 Enzyme 的使用方式，并为你的 React 测试提供指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/653a3a847d4982a6eb41e2a9