React 是一种用于构建用户界面的 JavaScript 库，它被广泛用于构建单页应用程序和移动应用程序。在 React 应用程序中，组件是构建块。对于开发人员而言，测试组件是确保应用程序质量的重要组成部分。Enzyme 是 React 测试库中最受欢迎的库之一，它提供了一种简单的方式来测试 React 组件。本文将介绍 Enzyme 的基础知识，以及如何使用它来测试 React 组件。
Enzyme 简介
Enzyme 是由 Airbnb 开发的 React 测试库，它提供了一种简单的方式来测试 React 组件。Enzyme 具有以下特点：
- 提供了一种简单的方式来测试 React 组件，可以测试组件的渲染结果、交互和行为。
- 支持多种测试方式，包括浅渲染、完整渲染和静态渲染。
- 提供了一组实用函数，可以方便地查找组件、模拟事件和检查组件状态。
- 支持 React 16 及更高版本。
安装 Enzyme
安装 Enzyme 非常简单。可以通过 npm 或 yarn 安装。
npm install --save-dev enzyme enzyme-adapter-react-16
或
yarn add --dev enzyme enzyme-adapter-react-16
配置 Enzyme
在使用 Enzyme 之前，需要配置 Enzyme 适配器。Enzyme 支持多个 React 版本，需要使用相应的适配器。在本文中，我们将使用 React 16 的适配器。
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });浅渲染
浅渲染是一种测试组件的方式，它只渲染组件本身，而不渲染组件的子组件。浅渲染可以用于测试组件的渲染结果、props 和状态。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
-------- ------------------ -
------ ------------------------
-
----------------------- -- -- -
----------- ------ -- -- -
----- ------- - -------------------- ----------- ----
---------------------------------------
---
---在上面的示例中，我们定义了一个名为 MyComponent 的组件，并使用浅渲染进行测试。我们使用 shallow 函数来渲染组件，并传递 name 属性。然后，我们使用 expect 函数来检查组件的渲染结果是否正确。
完整渲染
完整渲染是一种测试组件的方式，它渲染组件及其子组件。完整渲染可以用于测试组件的交互和行为。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
-------- ------------------ -
----- ------- --------- - ------------------
-------- ------------- -
-------------- - ---
-
------ -
-----
------- ------------------------------------
--------------------
------
--
-
----------------------- -- -- -
-------------- ----- -- ------- -- -- -
----- ------- - ------------------ ----
----- ------ - -----------------------
-------------------------
-------------------------------------------------
---
---在上面的示例中，我们定义了一个名为 MyComponent 的组件，并使用完整渲染进行测试。我们使用 mount 函数来渲染组件。然后，我们使用 find 函数来查找按钮，并使用 simulate 函数来模拟点击事件。最后，我们使用 expect 函数来检查组件状态是否正确。
静态渲染
静态渲染是一种测试组件的方式，它将组件渲染为静态 HTML，可以用于测试组件的输出。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- ---------
-------- ------------------ -
------ ------------------------
-
----------------------- -- -- -
----------- ------ -- -- -
----- ---- - ------------------- ----------- -----------
----------------------------------------
---
---在上面的示例中，我们定义了一个名为 MyComponent 的组件，并使用静态渲染进行测试。我们使用 render 函数来渲染组件，并传递 name 属性。然后，我们使用 expect 函数来检查组件的输出是否正确。
实用函数
Enzyme 提供了一组实用函数，可以方便地查找组件、模拟事件和检查组件状态。
- find(selector)：查找符合选择器的组件。
- simulate(event[, args])：模拟事件。
- prop(name)：获取组件的属性。
- state([key])：获取组件的状态。
- text()：获取组件的文本内容。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
-------- ------------------ -
----- ------- --------- - ------------------
-------- ------------- -
-------------- - ---
-
------ -
-----
------- ------------------------------------
--------------------
------
--
-
----------------------- -- -- -
-------------- ----- -- ------- -- -- -
----- ------- - -------------------- ----
----- ------ - -----------------------
-------------------------
-------------------------------------------------
------------------------------------------
---------------------------------------------
---
---在上面的示例中，我们使用实用函数来测试组件的交互和状态。我们使用 find 函数来查找按钮，并使用 simulate 函数来模拟点击事件。然后，我们使用 text 函数来获取组件的文本内容，并使用 state 函数和 prop 函数来获取组件的状态和属性。
结论
Enzyme 是 React 测试库中最受欢迎的库之一，它提供了一种简单的方式来测试 React 组件。本文介绍了 Enzyme 的基础知识，包括浅渲染、完整渲染、静态渲染和实用函数。Enzyme 可以帮助开发人员更快地测试组件，确保应用程序的质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675e817ee49b4d071617608d