Enzyme 与 React 一起使用的基本知识梳理
React 是一种受欢迎的 JavaScript 库，用于构建用户界面。Enzyme 是一个用于在 React 应用程序中编写测试的 JavaScript 测试实用程序库。使用 Enzyme 可以帮助您轻松地编写高质量的 React 组件测试。在本文中，我们将介绍 Enzyme 的基础知识，以及如何与 React 一起使用。
第一步: 安装 Enzyme
您可以通过 npm 或 yarn 安装 Enzyme。在以下示例中，我们将使用 npm。
npm install --save-dev enzyme enzyme-adapter-react-16
您还需要安装一些有用的 Enzyme 适配器，以便与 React 一起使用。这些适配器提供了 Enzyme 与 React 之间的紧密集成。
npm install --save-dev react-test-renderer react-dom
第二步: 配置 Enzyme
在您开始测试 React 组件之前，需要配置 Enzyme。您可以按以下方式进行配置：
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });这将使 Enzyme 使用适配器。现在，您准备好编写 Enzyme 测试例子了！
第三步: 编写测试案例
在 Enzyme 中，有三种测试用 Instrument 测方法。分别是 Shallow、Mount 和 Render。
- Shallow：在浅层渲染中，您将只渲染组件本身，而不会渲染其嵌套组件。这将使您可以轻松地测试单个组件而不会干扰其他组件。
- Mount：全渲染可以渲染组件以及其子组件树，并提供了对 React 组件生命周期的完全可测试性。
- Render：呈现渲染方式类似于 Mount，但生成轻量级的静态 HTML，因此可以获得一些有限的范围、转发和查询功能。
如果您有一个名为 ExampleComponent 的简单 React 组件，则可以编写如下 Shallow 测试方法：
-- -------------------- ---- -------
------ - ------- - ---- ---------
------ ---------------- ---- ---------------------
---------------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - ------------------------- ----
----------------------------------
---
---------- ---- - --- --------- -- -- -
----- ------- - ------------------------- ----
----------------------------------------------
--
---首先，我们导入 shallow 方法和 ExampleComponent 组件。然后，我们编写一个 describe 块来将测试组织在一起。然后编写两个测试，一个测试快照是否正确渲染，另一个测试 div 元素是否存在。
在第一个测试中，我们使用 Enzyme 中的 shallow 方法来创建组件实例。那么，我们使用 Jest 的 toMatchSnapshot 方法来验证我们是否成功地呈现了 ExampleComponent。
在第二个测试中，我们首先使用 shallow 方法创建组件实例。然后我们使用 find 方法来搜索渲染成的 DOM 树中的 div 元素。最后我们使用 Jest 的 toEqual 方法来验证是否成功找到了 div 元素。
Shallow、Mount 和 Render 方法提供了一些其他有用的方法，包括 setState、setProps、simulate 和 unmount。可以使用这些方法来更详细地测试您的 React 组件。
总结
Enzyme 是一个强大的 JavaScript 测试工具，可以轻松地测试 React 组件。使用 Shallow、Mount 和 Render 方法，您可以测试您的组件并验证其渲染是正确的。希望这篇文章能对您如何使用 Enzyme 提供了一些有用的知识。
参考资料：
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/644f6251980a9b385b8e8310