React 是一个流行的 JavaScript 库，用于构建用户界面。React 组件是 React 应用程序的构建块。为了确保 React 应用程序的质量和可靠性，测试是必不可少的。在本文中，我们将介绍如何使用 Enzyme 和 React Test Utils 测试 React 组件。
Enzyme 和 React Test Utils
Enzyme 是一个由 Airbnb 开发的 React 测试工具库。它提供了一组 API，用于测试 React 组件的输出和行为。Enzyme 可以与 Jest、Mocha、Chai 等测试框架一起使用。
React Test Utils 是 React 自带的测试工具库。它提供了一些函数和组件，用于测试 React 组件的行为和输出。
安装 Enzyme
要使用 Enzyme，您需要先安装它。您可以使用 npm 或 yarn 安装 Enzyme：
npm install --save-dev enzyme enzyme-adapter-react-16
或者
yarn add --dev enzyme enzyme-adapter-react-16
配置 Enzyme
要使用 Enzyme，您需要先配置它。在测试文件的开头，添加以下代码：
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });这将配置 Enzyme 使用 React 16 的适配器。
测试 React 组件
接下来，我们将创建一个简单的 React 组件，并测试它的输出和行为。这是一个计数器组件，它有一个按钮，每次单击按钮时都会将计数器的值加 1。
-- -------------------- ---- -------
------ ----- ---- --------
----- ------- ------- --------------- -
------------------ -
-------------
---------- - - ------ - --
---------------- - ----------------------------
-
------------- -
------------------------- -- -- ------ --------------- - - ----
-
-------- -
------ -
-----
--------- ----------------------
------- ---------------------------------------------
------
--
-
-
------ ------- --------我们将使用 Enzyme 和 React Test Utils 测试这个组件。在测试文件中，添加以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------- ---- ------------
------------------- -- -- -
---------- ------ ------- -- -- -
----- ------- - ---------------- ----
----- ---- - -------------------------
---------------------------- ----
---
---------- --------- ------- -- -- -
----- ------- - ---------------- ----
----- ------ - -----------------------
-------------------------
----- ---- - -------------------------
---------------------------- ----
---
---这个测试文件有两个测试用例。第一个测试用例测试组件是否正确渲染。我们使用 shallow 函数来渲染组件，并使用 find 函数来查找包含计数器值的 p 元素。我们使用 expect 断言来比较实际文本和预期文本。
第二个测试用例测试组件是否正确响应按钮单击事件。我们使用 simulate 函数模拟按钮单击事件，并使用 find 函数查找包含更新后计数器值的 p 元素。我们使用 expect 断言来比较实际文本和预期文本。
总结
在本文中，我们介绍了如何使用 Enzyme 和 React Test Utils 测试 React 组件。我们创建了一个简单的计数器组件，并使用 Enzyme 和 React Test Utils 测试它的输出和行为。测试是确保 React 应用程序质量和可靠性的关键。使用 Enzyme 和 React Test Utils，您可以轻松地测试 React 组件并确保它们按预期工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65766c78d2f5e1655dfadc2d