随着 React 的流行，越来越多的前端工程师开始使用 React 构建应用程序。在 React 开发中，测试是一个非常重要的环节。Enzyme 是一个流行的 React 测试工具，它提供了一种简单的方式来测试 React 组件的渲染、检查和快照。本文将介绍如何使用 Enzyme 进行 React 组件测试，包括组件渲染、检查和快照。
安装 Enzyme
在开始之前，我们需要安装 Enzyme。Enzyme 是一个独立的库，需要单独安装。我们可以使用 npm 或 yarn 安装 Enzyme。
npm install --save-dev enzyme enzyme-adapter-react-16
或者
yarn add --dev enzyme enzyme-adapter-react-16
配置 Enzyme
安装 Enzyme 后，我们需要在测试文件中配置 Enzyme。我们需要引入 Enzyme 和适配器，并将适配器设置为 Enzyme 的默认适配器。
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });组件渲染
组件渲染是测试 React 组件的第一步。我们可以使用 Enzyme 的 shallow() 方法来渲染组件。shallow() 方法只渲染组件的一层，可以快速测试组件的渲染。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- - ------- - ---- ---------
------ ------- ---- --------------------------
------ ----------- ---- ----------------
------------------ -------- --- --------- ---
----------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - -------------------- ----
----------------------------------
---
---在上面的示例中，我们使用 shallow() 方法来渲染 MyComponent 组件，并使用 toMatchSnapshot() 方法来生成组件快照。快照是组件的静态表示，包括组件的 HTML 结构和属性。如果组件的渲染结果与快照不一致，测试将失败。
组件检查
组件检查是测试 React 组件的第二步。我们可以使用 Enzyme 的 find() 方法来查找组件的子元素，并使用 text() 方法来获取元素的文本内容。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- - ------- - ---- ---------
------ ------- ---- --------------------------
------ ----------- ---- ----------------
------------------ -------- --- --------- ---
----------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - -------------------- ----
----------------------------------
------------------------------------------------- ---------
---------------------------------------------- -- - --------
---
---在上面的示例中，我们使用 find() 方法查找 MyComponent 组件中的 h1 和 p 元素，并使用 text() 方法获取元素的文本内容。如果元素的文本内容与预期不一致，测试将失败。
组件快照
组件快照是测试 React 组件的第三步。我们可以使用 Enzyme 的 toMatchSnapshot() 方法来生成组件快照，并使用 toMatchInlineSnapshot() 方法来更新快照。快照是组件的静态表示，包括组件的 HTML 结构和属性。如果组件的渲染结果与快照不一致，测试将失败。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- - ------- - ---- ---------
------ ------- ---- --------------------------
------ ----------- ---- ----------------
------------------ -------- --- --------- ---
----------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - -------------------- ----
----------------------------------
------------------------------------------------- ---------
---------------------------------------------- -- - --------
------------------ -------- ----- -- - --- --------- ---
----------------------------------------
---
---在上面的示例中，我们使用 setProps() 方法来更新 MyComponent 组件的属性，并使用 toMatchInlineSnapshot() 方法来更新组件快照。如果组件的渲染结果与更新后的快照不一致，测试将失败。
总结
Enzyme 是一个流行的 React 测试工具，它提供了一种简单的方式来测试 React 组件的渲染、检查和快照。在使用 Enzyme 进行 React 组件测试时，我们需要先安装 Enzyme，并在测试文件中配置 Enzyme。然后，我们可以使用 Enzyme 的 shallow() 方法来渲染组件，使用 find() 方法来查找组件的子元素，并使用 toMatchSnapshot() 方法来生成组件快照。如果组件的渲染结果与快照不一致，测试将失败。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65e677041886fbafa41b2042