React 是一种流行的框架，许多人都使用它来构建单页应用程序。但是，测试 React 组件的过程并不容易。为了解决这个问题，Enzyme 库被创建出来。Enzyme 是一个用于 React 组件测试的 JavaScript 测试工具，可以方便地测试组件的输出。在本文中，我们将深入了解如何使用 Enzyme 来测试 React 组件。
安装
Enzyme 需要安装到项目中。可以使用 npm 包管理工具安装 Enzyme：
npm install --save-dev enzyme enzyme-adapter-react-16
Enzyme 还需要配置适当的适配器。对于 React 16，需要安装 enzyme-adapter-react-16：
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });渲染组件
第一步是渲染一个组件。我们可以使用方法 shallow，将组件渲染到虚拟 DOM 中，然后返回包含该组件的对象。这使得我们可以查看组件的输出并测试其行为，而无需实际渲染整个 DOM。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
----------- ----------- -- -- -
----- ------- - -------------------- ----
----------------------------------
---
---上面的代码快将 MyComponent 这个组件浅渲染（using a shallow renderer），这意味着 MyComponent 的子组件是未渲染的，我们只关注 MyComponent 自身的内容。
在这个例子中，我们使用 expect 函数和 Jest 测试框架的快照测试机制来检查组件是否按预期呈现。我们可以多次运行测试，Enzyme 会自动为我们更新快照。
查找元素
接下来是查找和操作渲染出的元素。Enzyme 提供了一些方法来查找组件中的特定元素。
find(selector)- 根据选择器查找子元素findWhere(predicate)- 根据条件函数查找子元素，得到符合条件的元素集合
假设我们的 MyComponent 组件有一个按钮，我们可以查找它并模拟点击事件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
--------- --- ------- -------- -- ------ ------- -- -- -
----- ----------- - ----------
----- ------- - -------------------- --------------------- ----
-----------------------------------------
---------------------------------------------
---
---这个测试首先创建一个模拟的点击处理函数 handleClick，然后渲染了 MyComponent 并找到按钮元素，最后模拟了点击事件，并检查处理函数是否被调用了。
模拟事件
上一个例子中，我们通过 simulate 方法模拟了点击事件。Enzyme 还提供了一些其他的模拟事件的方法：
simulate(event[, args])— 模拟一个事件setState(newState[, callback])– 设置组件的状态
以下是一个使用 setState 方法模拟状态更改的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
----------- ----- -- ------ ------- -- -- -
----- ------- - -------------------- ----
---------------------------------------
-----------------------------------------
---------------------------------------
---
---在这个例子中，我们通过 setState 方法更改了组件的状态，然后检查状态是否被更改了。
设置属性和上下文
有些情况下，我们需要在测试中设置属性和上下文。Enzyme 提供了两种方法来设置这些值：
setProps(nextProps)– 设置组件的属性setContext(context)– 设置组件的上下文
以下是一个使用 setProps 方法设置属性的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
----------- ---- --- ------- ----- ------ -- -- -
----- ------- - -------------------- ------------ ------ ----
----------------------------------------- --------
------------------ ------ -------- ------ ---
------------------------------------------- --------
---
---在这个例子中，我们首先渲染了 MyComponent 并检查其标题属性是否正确。接下来，我们使用 setProps 方法更改标题，并再次检查属性是否正确。
总结
Enzyme 是一个非常有用的测试工具，可以使 React 组件的测试更加容易。本文介绍了 Enzyme 的一些高级功能，包括查找元素、模拟事件、设置属性和上下文等等。这些功能可以帮助我们更准确地测试组件的行为，以及更快地找出问题。希望本文对你有所帮助，开始尝试使用 Enzyme 来测试 React 组件吧！
示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
----------- ----------- -- -- -
----- ------- - -------------------- ----
----------------------------------
---
--------- --- ------- -------- -- ------ ------- -- -- -
----- ----------- - ----------
----- ------- - -------------------- --------------------- ----
-----------------------------------------
---------------------------------------------
---
----------- ----- -- ------ ------- -- -- -
----- ------- - -------------------- ----
---------------------------------------
-----------------------------------------
---------------------------------------
---
----------- ---- --- ------- ----- ------ -- -- -
----- ------- - -------------------- ------------ ------ ----
----------------------------------------- --------
------------------ ------ -------- ------ ---
------------------------------------------- --------
---
---来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6475c03c968c7c53b02c0fe6