在使用 React 进行前端开发的时候，经常需要使用 Enzyme 进行组件的单元测试。由于 React 组件之间的嵌套关系比较复杂，有时候会出现难以定位组件的情况。这时候就需要使用 get-by-enzyme-id 这个 npm 包了。
什么是 get-by-enzyme-id
get-by-enzyme-id 是一个 Enzyme 的扩展包，它提供了一个新的方法：getByEnzymeId。这个方法可以根据指定的 data-enzyme-id 属性找到对应的组件。这个 data-enzyme-id 属性是我们在组件的 JSX 代码中自己添加的，用于标识组件的唯一标识。使用了这个包之后，我们就可以更加方便地进行单元测试了。
使用方法
安装
使用 npm 安装 get-by-enzyme-id：
npm install --save-dev get-by-enzyme-id
使用
在需要使用的测试文件中引入这个包：
-- -------------------- ---- -------
------ - ------- - ---- --------
------ - ------------- - ---- ------------------
---------------- -- -- -
---------- ----- ------- -- -- -
----- ------- - ------------------- ---
----- ---------- - ---------------------- --------------
------------------------------------- -------
--
--在组件中添加 data-enzyme-id 属性：
export default function HelloWorld() {
return <div data-enzyme-id="hello-world">Hello World</div>
}之后我们就可以使用 getByEnzymeId 方法来获取组件了。这个方法会返回一个 Enzyme 的实例对象，可以对其进行各种操作。
注意事项
使用 get-by-enzyme-id 也有一些需要注意的地方：
data-enzyme-id属性的命名需要遵循 HTML 元素中属性的命名规范。根据规范，属性名应该全部小写，不能包含空格，可以使用连字符-分隔单词，不能以数字或连字符开头。如果一个组件出现了多次，每个实例的
data-enzyme-id必须是唯一的。get-by-enzyme-id 返回的实例对象是 Enzyme 的
ShallowWrapper对象，和正常的 Enzyme 的使用方法一样。如果需要对组件进行其他的操作（例如模拟点击、修改数据等），可以继续使用 Enzyme 的其他 API。
总结
get-by-enzyme-id 这个 npm 包可以让我们更加方便地进行 React 组件的单元测试。它提供了一个简单的方法，让我们可以根据自定义的属性 data-enzyme-id 来快速定位组件。同时也需要注意 data-enzyme-id 属性的命名规范和使用方法的限制。掌握了 get-by-enzyme-id 的使用方法，我们就可以更加轻松地进行 React 组件的测试工作了。
示例代码
HelloWorld.jsx
import React from 'react'
export default function HelloWorld() {
return <div data-enzyme-id="hello-world">Hello World</div>
}HelloWorld.test.jsx
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------- - ---- --------
------ - ------------- - ---- ------------------
------ ---------- ---- --------------
---------------- -- -- -
---------- ----- ------- -- -- -
----- ------- - ------------------- ---
----- ---------- - ---------------------- --------------
------------------------------------- -------
--
--来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672663660cf7123b364ce