React 是一个非常流行的前端框架，它采用了组件化的编程思想，将页面拆分为一个个小的组件，通过组合这些组件可以构建出复杂的页面。
为了保证组件在运行过程中没有错误，我们需要为组件编写单元测试。Enzyme 是一个专门用来测试 React 组件的工具，它提供了一系列 API 来模拟组件的渲染和交互，并能够方便地找到对应的 HTML 元素。
本篇文章将会介绍如何使用 Enzyme 找到对应的 HTML 元素，以及一些常用的 API。
Enzyme 的安装
使用 Enzyme 需要先将其安装到项目中。可以使用 NPM 或者 Yarn 进行安装。
# 使用 NPM 安装 npm install --save-dev enzyme enzyme-adapter-react-16 # 使用 Yarn 安装 yarn add --dev enzyme enzyme-adapter-react-16
这里使用的 Enzyme 是针对 React 16 版本的适配器，因此需要同时安装 enzyme-adapter-react-16。
Enzyme 的使用
shallow
shallow 方法用于对一个组件进行浅渲染，并返回一个包含了组件渲染结果的 ShallowWrapper 对象。这个对象中包含了一些有用的 API，例如 find 用于查找指定的元素和 text 用于获取该元素的文本内容。
下面是一个简单的组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- -------- --------------- -
------ -
-----
---------- ------------------
---------- -- -- ------------
------
--
-使用 shallow 方法可以对这个组件进行测试，查找到其中的 h1 元素，并获取其文本内容：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ -------- ---- -------------
-------------------- -- -- -
---------- ---- --- ------- ------- -- -- -
----- ------- - ----------------- ------------ ----
------------------------------------------------- ---------
---
---上述代码中，我们使用 shallow 方法将 Greeting 组件进行了浅渲染，并查找到其中的 h1 元素，然后使用 text 方法获取其文本内容，并进行断言。
mount
如果需要测试组件的交互行为或者组件生命周期中的方法，可以使用 mount 方法进行完整渲染。这个方法会在浏览器环境下进行渲染，并提供了更多的 API。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ -------- ---- -------------
-------------------- -- -- -
---------- ------- --- ------- --------- -- -- -
----- ------- - --------------- ------------ ----
--------------- ----------------------
--------------------------------------------- ------- --- ----------
---
---上述代码中，我们使用 mount 方法对 Greeting 组件进行了完整渲染，然后查找到其中的 p 元素，并模拟点击 a 元素，并查找到最终渲染结果中的 p 元素，并进行断言。
shallow vs. mount
shallow 和 mount 方法的区别在于渲染的深度和所提供的 API。shallow 方法只会渲染组件的第一层子组件，而 mount 方法会递归地渲染所有的子组件。同时，mount 方法所提供的 API 更加全面，但也更加复杂。
在编写测试用例时，应该根据具体的需求选择合适的方法。
查找 HTML 元素
在使用 Enzyme 进行单元测试过程中，常常需要查找对应的 HTML 元素。Enzyme 提供了多种查找元素的方式：
#id
可以通过 #id 查找对应的元素。
wrapper.find('#my-id');.class
可以通过 .class 查找对应的元素。
wrapper.find('.my-class');TagName
可以通过标签名查找对应的元素。
wrapper.find('div');attribute
可以通过元素的属性查找对应的元素。
wrapper.find('[data-test-id="my-id"]');pseudo-selector
可以使用伪选择器查找符合条件的元素。
wrapper.find('input:disabled');其他方法
还有一些其他方法可以用来查找元素，例如 first、last、closest 等等，具体使用方法可以参考官方文档。
总结
Enzyme 是一个强大的 React 组件测试工具，提供了多种查找 HTML 元素的方式，可以轻松完成组件单元测试的编写。在编写测试用例时，应该根据具体的需求选择合适的方法，并且要注意测试用例的编写规范和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6458d094968c7c53b0b1fc30