什么是 Enzyme
Enzyme 是一款 React 组件测试工具，由 Airbnb 于 2016 年开源。Enzyme 提供了一组简单的方法，可以方便地测试组件的渲染结果、交互行为以及状态变化，为项目的质量保证提供了有力的工具支持。
安装和配置 Enzyme
使用 Enzyme 之前，需要先安装和配置 Enzyme。首先，安装 Enzyme 和 Enzyme-adapter-react：
npm install --save-dev enzyme enzyme-adapter-react
然后，在测试代码中导入 Enzyme 和 Enzyme-adapter-react，配置适配器：
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });编写测试用例
Enzyme 提供了一组简单的 API，可以方便地测试组件的渲染、交互和状态变化。
渲染测试
渲染测试是测试组件是否被正确地渲染的关键。Enzyme 提供了三个 API 来测试组件的渲染结果：shallow()、mount() 和 render()。我们可以选择其中一个来测试组件的渲染结果。
shallow()
shallow() 方法用于浅层渲染组件，并返回一个 ShallowWrapper 对象，可以用于查询、遍历和交互组件。
-- -------------------- ---- -------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - -------------------- ----
----------------------------------
---
---上面的代码使用 shallow() 方法浅层渲染 MyComponent 组件，并用 toMatchSnapshot() 方法将其渲染结果快照保存下来，以便后续比较和验证。
mount()
mount() 方法用于完全渲染组件，并返回一个 ReactWrapper 对象，可以访问组件的子树和 DOM 节点，并模拟用户交互。
-- -------------------- ---- -------
------ - ----- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - ------------------ ----
----------------------------------
---
---上面的代码使用 mount() 方法完全渲染 MyComponent 组件，并用 toMatchSnapshot() 方法将其渲染结果快照保存下来。
render()
render() 方法用于静态渲染组件，并返回一个 CheerioWrapper 对象，可以访问组件的 HTML 结构。
-- -------------------- ---- -------
------ - ------ - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - ------------------- ----
----------------------------------
---
---上面的代码使用 render() 方法静态渲染 MyComponent 组件，并用 toMatchSnapshot() 方法将其 HTML 结构快照保存下来。
交互测试
除了测试组件的渲染结果外，还需要测试组件的交互行为是否符合预期。Enzyme 提供了一组 API，可以模拟用户交互，并验证组件的交互行为。
simulate()
simulate() 方法用于模拟用户交互操作，比如点击、输入等。
-- -------------------- ---- -------
------ - ----- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ ----- ------- -- -- -
----- ----------- - ----------
----- ------- - ------------------ --------------------- ----
-----------------------------------------
---------------------------------
---
---上面的代码使用 simulate() 方法模拟用户点击 button 元素，并验证组件的 onClick 方法是否被调用。
状态测试
最后，Enzyme 还提供了一些 API，可以测试组件状态的变化。
setState()
setState() 方法用于设置组件的状态，并触发重新渲染。
-- -------------------- ---- -------
------ - ----- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ ----- -------- -- -- -
----- ------- - ------------------ ----
------------------ ------ - ---
------------------------------------------------
---
---上面的代码使用 setState() 方法设置组件的 count 状态为 1，并验证组件的 .count 元素是否被更新。
总结
使用 Enzyme 测试 React 组件，可以方便地测试组件的渲染结果、交互行为和状态变化，为项目的质量保证提供了有力的工具支持。本文介绍了 Enzyme 的基本使用方法和相关 API，希望对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6461d8ba968c7c53b032faf3