在开发前端应用程序时，测试是至关重要的。它能够帮助我们发现潜在的问题，并确保应用程序在不同的环境中都能正常运行。然而，在开发过程中手动测试是非常耗时的，因此我们需要一种能够快速、自动化地执行测试的方法。在 React 应用程序中，我们可以使用 Enzyme 库来创建快速测试。
什么是 Enzyme？
Enzyme 是一个用于 React 应用程序的 JavaScript 测试实用程序库。它由 Airbnb 开发，并提供了一组强大的 API，可以帮助我们轻松地创建和操作 React 组件。Enzyme 提供了三个不同的渲染器：shallow、mount 和 render。这些渲染器可以帮助我们在不同的环境中进行测试，以确保我们的应用程序的行为符合预期。
如何安装 Enzyme？
在开始使用 Enzyme 之前，我们需要先安装它。我们可以使用 npm 或 yarn 来安装 Enzyme：
npm install --save-dev enzyme enzyme-adapter-react-16
或者
yarn add --dev enzyme enzyme-adapter-react-16
Enzyme 还需要一个适配器来与 React 一起使用。在本例中，我们使用的是适配器适用于 React 16。
如何使用 Enzyme？
一旦我们安装了 Enzyme，我们就可以开始使用它来创建测试。以下是一个简单的示例，演示了如何使用 Enzyme 来测试一个简单的 React 组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- - ------- - ---- ---------
------ ------- ---- --------------------------
------ ----------- ---- ----------------
------------------ -------- --- --------- ---
----------------------- -- -- -
----------- ----------- -- -- -
----- ------- - -------------------- ----
----------------------------------
---
---在这个示例中，我们首先导入了 Enzyme 和适配器，然后配置了 Enzyme 以使用 React 16 适配器。接下来，我们使用 shallow 渲染器来创建一个 MyComponent 组件的浅层副本。最后，我们使用 Jest 断言来验证组件是否正确渲染。
Enzyme 的渲染器
Enzyme 提供了三个不同的渲染器：shallow、mount 和 render。让我们来看看每个渲染器的用途。
shallow 渲染器
shallow 渲染器用于创建一个组件的浅层副本。它只会渲染组件的第一层子组件，而不会渲染所有的子组件。这使得 shallow 渲染器非常快，并且可以用于测试组件的行为和属性。
mount 渲染器
mount 渲染器用于在完整 DOM 中渲染一个组件。这使得我们可以测试组件的交互和生命周期方法。但是，由于 mount 渲染器会渲染整个组件树，因此它的速度比 shallow 渲染器慢得多。
render 渲染器
render 渲染器用于将组件渲染为静态 HTML。这使得我们可以测试组件的渲染输出，而无需在浏览器中运行它。但是，由于 render 渲染器不会渲染组件的生命周期方法，因此它不适用于测试交互性。
如何测试组件的属性和状态？
在 React 中，组件的属性和状态是非常重要的。我们可以使用 Enzyme 来测试组件的属性和状态是否正确。
测试属性
以下是一个简单的示例，演示了如何使用 Enzyme 测试组件的属性：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- - ------- - ---- ---------
------ ------- ---- --------------------------
------ ----------- ---- ----------------
------------------ -------- --- --------- ---
----------------------- -- -- -
----------- --------- ---- ------- -- -- -
----- ------- - -------------------- ----------- ----
---------------------------------------------
---
---在这个示例中，我们创建了一个 MyComponent 组件的浅层副本，并将 name 属性设置为 John。然后，我们使用 props() 方法来获取组件的属性，并使用 Jest 断言来验证属性是否正确。
测试状态
以下是一个简单的示例，演示了如何使用 Enzyme 测试组件的状态：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- - ------- - ---- ---------
------ ------- ---- --------------------------
------ ----------- ---- ----------------
------------------ -------- --- --------- ---
----------------------- -- -- -
----------- --------- ---- ------- -- -- -
----- ------- - -------------------- ----
------------------ ------ - ---
------------------------------------------
---
---在这个示例中，我们创建了一个 MyComponent 组件的浅层副本，并将 count 状态设置为 1。然后，我们使用 state() 方法来获取组件的状态，并使用 Jest 断言来验证状态是否正确。
结论
Enzyme 是一个非常强大的测试实用程序库，可以帮助我们快速、自动化地测试 React 应用程序。在本文中，我们学习了如何安装和使用 Enzyme，以及如何测试组件的属性和状态。Enzyme 还提供了其他功能，例如模拟事件和测试 Redux 应用程序。如果您正在开发 React 应用程序并且需要进行测试，那么 Enzyme 绝对是一个值得尝试的工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675e85c4e49b4d0716178b8c