Enzyme 是一个用于 React 应用程序的 JavaScript 测试实用程序库。它提供了一组用于测试 React 组件的 API，使开发人员可以轻松地测试组件的各个方面。在本文中，我们将介绍 Enzyme 的常用技巧和注意事项，以及如何使用它来测试您的 React 应用程序。
Enzyme 的安装和配置
在开始使用 Enzyme 之前，您需要将其安装为项目的依赖项。您可以使用 npm 或 yarn 安装 Enzyme：
npm install --save-dev enzyme enzyme-adapter-react-16
或者
yarn add --dev enzyme enzyme-adapter-react-16
接下来，您需要配置 Enzyme 以与您的项目一起使用。在您的测试文件中，添加以下代码：
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });现在，您已经准备好开始使用 Enzyme 来测试您的 React 应用程序了。
测试 React 组件的基本用法
在 Enzyme 中，有三种不同的渲染方式来测试 React 组件。这些方式包括：
shallow：渲染组件的浅层副本，只渲染组件本身，而不是它的子组件。mount：在 DOM 中渲染组件，可以测试组件的生命周期方法和子组件。render：将组件渲染为静态 HTML，并返回一个 Cheerio 对象，可以测试组件的 HTML 结构。
现在，我们将深入研究这些渲染方式以及如何使用它们来测试您的 React 组件。
浅层渲染
shallow 方法可以用来渲染一个组件的浅层副本。它将只渲染组件本身，而不是它的子组件。这使得它成为测试组件行为的好方法，而不用担心子组件的行为。
下面是 shallow 方法的一个示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - -------------------- ----
----------------------------------
---
---在这个示例中，我们首先导入了 shallow 方法和我们要测试的组件 MyComponent。然后，我们使用 shallow 方法来渲染组件，并使用 toMatchSnapshot 方法来确保渲染输出与预期输出匹配。
完全渲染
mount 方法可以用来在 DOM 中渲染一个组件，这使得它成为测试组件的生命周期方法和子组件的好方法。但是，由于它在 DOM 中渲染组件，因此它的性能比 shallow 方法慢。
下面是 mount 方法的一个示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - ------------------ ----
----------------------------------
---
---在这个示例中，我们使用 mount 方法来渲染组件，并使用 toMatchSnapshot 方法来确保渲染输出与预期输出匹配。
静态渲染
render 方法将组件渲染为静态 HTML，并返回一个 Cheerio 对象，可以测试组件的 HTML 结构。它类似于 mount 方法，但性能更好，因为它不会在 DOM 中渲染组件。
下面是 render 方法的一个示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - ------------------- ----
----------------------------------
---
---在这个示例中，我们使用 render 方法来渲染组件，并使用 toMatchSnapshot 方法来确保渲染输出与预期输出匹配。
Enzyme 的常用 API
除了渲染方式之外，Enzyme 还提供了一组用于测试 React 组件的 API。这些 API 包括：
find(selector)：查找与指定选择器匹配的子元素。props()：返回组件的 props。state()：返回组件的状态。simulate(event[, ...args])：模拟一个事件。
下面是这些 API 的示例用法：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - -------------------- ----
--------------------------------------------------
----------------------------------------- ------------
----------------------------------------------
-----------------------------------------
-----------------------------------------------
---
---在这个示例中，我们首先使用 shallow 方法来渲染组件。然后，我们使用 find 方法来查找与指定选择器匹配的子元素。我们还使用 props 方法和 state 方法来分别返回组件的 props 和状态。最后，我们使用 simulate 方法来模拟一个事件。
注意事项
在使用 Enzyme 进行测试时，请注意以下几点：
- Enzyme 只能测试 React 组件。如果您的应用程序使用其他框架或库，Enzyme 将无法测试它们。
- Enzyme 测试应该覆盖尽可能多的代码路径，以确保组件的所有行为都被测试到。
- Enzyme 测试应该使用
toMatchSnapshot方法来检查组件的渲染输出是否正确。这将确保您的组件在未来的更改中保持一致。
结论
Enzyme 是一个非常有用的测试实用程序库，可以帮助您测试 React 应用程序的各个方面。在本文中，我们介绍了 Enzyme 的常用技巧和注意事项，以及如何使用它来测试您的 React 应用程序。如果您正在开发 React 应用程序，并且想要确保您的代码正常工作，请考虑使用 Enzyme 进行测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67420db2db344dd98dcf8f2d