React 是近年来一个非常流行的前端 JavaScript 框架，许多开发者都在使用它来构建自己的 Web 应用程序。与 React 一起配套使用的一个重要工具是 Enzyme，这是 Airbnb 开源的一个 React 组件测试工具，可以帮助开发者更方便地进行代码测试和验证。在本文中，我们将分享如何使用 Enzyme 进行 React 组件测试的技巧。
Enzyme 是什么？
Enzyme 是一个用于 React 组件测试的 JavaScript 库。它由 Airbnb 开发，提供了丰富的测试组件和测试 DOM 元素的 API 接口。Enzyme 允许您在一个舒适的测试环境中工作，从而可以专注于编写有用的测试代码。Enzyme 的主要优势在于它提供了一种易于使用的方式来测试 React 组件。很多开发者都使用它来进行单元测试和集成测试。
安装和使用 Enzyme
要开始使用 Enzyme 进行 React 组件测试，首先需要在您的项目中安装 Enzyme。在终端中，执行以下命令进行安装：
npm install --save-dev enzyme enzyme-adapter-react-16
然后，将以下代码添加到你的测试文件中：
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });现在，您已经准备好使用 Enzyme 进行 React 组件测试了。
测试 React 组件
下面是一个示例代码，用于测试一个包含两个按钮的 React 组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ --- --------- -- -- -
----- ------- - -------------------- ----
-----------------------------------------------
---
---------- ---- --- ------- -------- ---- --------- -- -- -
----- ------- - ----------
----- ------- - -------------------- ----------------- ----
-----------------------------------------------
-----------------------------------
---
---这个测试用例使用了 shallow() 方法，这个函数是 Enzyme 提供的渲染方法之一。它返回一个包含测试组件渲染结果的 shallow wrapper 对象。然后，我们使用 find() 方法，查找包含两个按钮的 DOM 元素。使用 toHaveLength() 断言方法来验证是否存在两个按钮。接下来，我们用 Jest 来模拟点击程序，验证你是否触发了 onClick 函数，以确保事件处理程序能够运行。
组件模拟
需要模拟给定的组件的外部依赖项或组件的渲染方法。可以使用 jest.fn() 方法，这个函数创建一个模拟函数，可以在测试中使用。
const onClick = jest.fn();
这段代码创建了名为 onClick 的函数模拟对象。
测试 React 组件的状态
当你想测试你的组件状态时，你也可以使用 Enzyme 提供的 state() 方法，这个方法可以访问测试组件的状态。例如，下面是一个测试用例，用来验证组件的 counter 状态是否正确增加。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- --------- --- ------- ---- --- ------ -- --------- -- -- -
----- ------- - -------------------- ----
----- ---------- - -------------------------
-----------------------------------------------
----- ---------- - -------------------------
---------------------------------- - ---
---
---这段代码使用 shallow() 方法来渲染组件。然后，我们使用 state() 方法来获取当前状态中的计数器值。我们模拟单击第一个按钮，并使用新的 state() 值来检查组件状态是否已更新。
结论
Enzyme 是一个非常有用的测试工具，它可以帮助您方便地测试 React 组件，并验证您的代码的正确性。使用 Enzyme，您可以轻松编写测试代码，并使用丰富的 API 接口来测试您的代码。使用本文介绍的技巧，您可以更轻松地使用 Enzyme 进行单元测试和集成测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f4f126c5c563ced567de55