React 是一种用于构建用户界面的 JavaScript 库。在 React 中，我们使用组件来构建应用程序。在应用程序的开发过程中，组件的单元测试是非常重要的一环。在测试组件时，我们通常需要对其进行模拟。对于模拟过程中一些特殊情景的测试，我们需要使用 Enzyme 进行元素的定位和检查。
本文将介绍 Enzyme 是什么以及如何使用它来定位和测试 React 组件中的元素。
Enzyme 简介
Enzyme 是一种 React 组件测试工具，它可以帮助我们在测试 React 组件时进行元素的定位和检查。Enzyme 提供了三个用于测试的组件 mount、shallow 和 render。
- mount：使用 JSDOM 在完整的 DOM 中渲染组件，并返回一个包含渲染输出的 ReactWrapper 实例。
- shallow：仅渲染组件的顶级元素，并返回一个包含渲染输出的 ShallowWrapper 实例。
- render：以静态 HTML 字符串的形式渲染组件，并返回一个包含渲染输出的 CheerioWrapper 实例。
Enzyme 还提供了许多方法来帮助我们定位元素。
- find：用于查找与选择器匹配的子元素。
- filter：用于过滤元素集。
- first、last、at：用于选择元素集中的第一个、最后一个或第 n 个元素。
- contains：用于检查元素集是否包含指定的元素。
- simulate：用于模拟用户操作。
Enzyme 的使用
在使用 Enzyme 之前，我们需要安装它。使用 npm 安装 Enzyme：
npm install --save-dev enzyme enzyme-adapter-react-16
然后在测试文件中导入 Enzyme 和适配器：
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });下面，我们将使用一个示例组件来介绍 Enzyme 的使用。
假设我们有一个简单的登录表单组件：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- --------- ------- --------- -
------------------ -
-------------
---------- - -
------ ---
--------- ---
--
---------------------- - ----------------------------------
------------------------- - -------------------------------------
----------------- - -----------------------------
-
------------------------ -
--------------- ------ ------------------ ---
-
--------------------------- -
--------------- --------- ------------------ ---
-
------------------- -
-----------------------
------------------- ------------------- --------- -------------------------
-
-------- -
------ -
----- -----------------------------
-------
------
------ ------------ ------------------------ --------------------------------- --
--------
--- --
-------
---------
------ --------------- --------------------------- ------------------------------------ --
--------
--- --
------- -----------------------------
-------
--
-
-
------ ------- ----------假设我们要测试这个组件，我们可以这样做：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- - ----- - ---- ---------
------ ------- ---- --------------------------
------ --------- ---- --------------
------------------ -------- --- --------- ---
--------------------- -- -- -
---------- ------ --- ----- ----- ---- --- ----- ----- --------- -- -- -
----- ------- - ---------------- ----
----- ---------- - ------------------------------------
----------------------------- - ------- - ------ ------------------ - ---
----------------------------------------------------------
---
---------- ------ --- -------- ----- ---- --- -------- ----- --------- -- -- -
----- ------- - ---------------- ----
----- ------------- - ---------------------------------------
-------------------------------- - ------- - ------ ------------- - ---
--------------------------------------------------------
---
---------- ---- --- ------------ ------ ---- --- ---- -- ----------- -- -- -
----- ------------ - ----------
----- ------- - ---------------- ----------------------- ----
----- ---- - ---------------------
------------------------
----------------------------------------
---
---在这个测试代码中，我们使用了 mount 方法来渲染组件。然后我们使用 find 方法和 CSS 选择器（例如 'input[type="email"]'）来定位元素。
在第一个测试用例中，我们选择 email 输入框，然后使用 simulate 方法模拟输入框的变化，并检查组件状态 email 是否更新。
在第二个测试用例中，我们选择密码输入框，然后使用 simulate 方法模拟输入框的变化，并检查组件状态 password 是否更新。
在第三个测试用例中，我们选择了整个表单，并使用 simulate 方法模拟表单提交事件，并检查 handleSubmit 方法是否被调用。
我们还可以使用 filter、first、last 和 at 等方法来选择元素。
此外，我们还可以使用 contains 方法来检查元素是否包含特定内容。例如，我们可以使用以下代码来检查是否存在一个按钮标签，并且该标签显示的文本是 'Submit'：
expect(wrapper.contains(<button>Submit</button>)).toBe(true);
总结
Enzyme 是一个非常有用的工具，可以帮助我们在测试 React 组件时查找和测试元素。在我们的示例中，我们使用了 mount 方法来渲染组件，并使用了 find 方法等方法来查找、过滤和选择元素。在实际开发中，Enzyme 可以帮助我们更有效地测试组件并找到潜在的错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6456175b968c7c53b095ca44