React 是一种用于构建用户界面的 JavaScript 库，而 Enzyme 是一个 React 应用程序的测试工具库。它提供了一系列 API，可以帮助我们对 React 组件进行测试。本文将介绍如何使用 Enzyme 进行测试驱动 React 应用程序。本文有深度和学习以及指导意义，且包含示例代码。
什么是 Enzyme
Enzyme 是一个 React 应用程序的测试工具库。它提供了一系列 API，可以帮助我们对 React 组件进行测试。Enzyme 针对不同的测试需求提供了不同的 API：Shallow、Mount 和 Render。其中 Shallow API 用于测试 React 组件的单独一层，Mount 和 Render 则可以测试多层或整个应用程序。
安装 Enzyme
要使用 Enzyme 进行测试驱动 React 应用程序，需要先安装 Enzyme。可以使用 npm 包管理工具来安装：
npm install enzyme --save-dev
在安装 Enzyme 之后，还需要安装一个适配器，以便 Enzyme 可以与 React DOM 一起使用。如果你正在使用 React 16 或更高版本，可以安装 enzyme-adapter-react-16：
npm install enzyme-adapter-react-16 --save-dev
如果你正在使用 React 15 或更低版本，可以安装 enzyme-adapter-react-15 或 enzyme-adapter-react-14。在本文中，我们假设使用的是 React 16。
在安装完适配器之后，需要在 Enzyme 中进行配置。在测试文件的头部，添加以下代码：
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });使用 Enzyme 进行测试
在了解了 Enzyme 的基本知识和安装后，我们可以开始使用它进行测试。在这里，我们将使用 Shallow API 进行测试。
首先，让我们创建一个简单的 React 组件，并对它进行测试。假设我们有一个组件叫做 Button，它接受两个属性：text 和 onClick。
-- -------------------- ---- ------- -- ---------- ------ ----- ---- -------- ----- ------ - -- ----- ------- -- -- - ------ ------- ---------------------------------- -- ------ ------- -------
现在，我们创建一个测试文件，测试 Button 组件。
-- -------------------- ---- -------
-- --------------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------ ---- -----------
---------------- ----------- -- -- -
---------- ------ - -------- -- -- -
----- ------- - --------------- ----
-----------------------------------------------
---
---------- ---- --- ---- -- --- -------- -- -- -
----- ------- - --------------- ----------- --- ----
------------------------------------- -----
---
---------- ---- --- ------- -------- ---- --------- -- -- -
----- ------- - ----------
----- ------- - --------------- ----------------- ----
-----------------------------------------
-----------------------------------
---
---在上面的测试中，我们测试了三个方面。首先，我们测试 Button 组件是否可以正确渲染一个 button 元素。然后，我们测试 Button 组件是否可以正确显示传入的文本。最后，我们测试 Button 组件是否可以正确调用 onClick 函数。
在这里，shallow 函数用于渲染 Button 组件的单独一层。在测试中，我们使用了 Jest 测试框架来断言输出是否符合预期。
总结
使用 Enzyme 进行测试驱动 React 应用程序是很容易的。只需安装 Enzyme 和适配器，并在测试文件中引入即可。通过使用 Shallow、Mount 和 Render API，我们可以测试 React 组件的不同层次。同时，Enzyme 提供了一系列的 API，可以帮助我们轻松地测试 React 组件。在进行测试时，我们可以使用 Jest 测试框架来断言输出是否符合预期。当你熟悉了 Enzyme 后，你会发现使用它进行测试驱动 React 应用程序可以大大减少编码错误，并提高应用程序的质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64905b7348841e9894e84e77