React 是一种流行的 JavaScript 库，用于构建用户界面。它的虚拟 DOM 管理和渲染机制使得开发高效且易于维护。但是，随着项目的增长，你将需要对你的 React 组件进行更多的测试，以确保它们能够正常运行。本文将介绍如何使用 Enzyme 进行 React 组件测试，Enzyme 是一个 React 组件测试工具，可以帮助我们测试 React 组件的状态、属性和行为。
安装 Enzyme
我们可以使用 npm 安装 Enzyme：
npm install --save-dev enzyme enzyme-adapter-react-16
配置 Enzyme
安装成功后，我们需要将 Enzyme 配置到我们的测试文件中。让我们为使用 Jest 的 React 应用程序配置 Enzyme，为此，我们需要在 test/setupTests.js 文件中编写以下代码：
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });测试 React 组件
让我们来编写一个简单的 React 组件并测试它。这个组件的目的是根据传递给它的名称呈现一个简单的欢迎消息。下面是这个组件的源代码：
import React from "react";
function Welcome(props) {
return <h1>Hello, {props.name}!</h1>;
}
export default Welcome;现在我们来编写测试代码。我们将测试这个组件是否能够正确接收名称并呈现欢迎消息。下面是这个测试代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------- ---- ------------
----------------- ----------- -- -- -
---------- ------ --- ---- -- --- ------- --------- -- -- -
----- ------- - ---------------- ----------- ----
----- -------------- - ---------- -----------
-------------------------------------------------------
---
---在上面的代码中，我们使用了 shallow 函数来进行浅渲染，从而获得组件渲染后的输出结果。然后，我们检查组件输出是否包含了期望的欢迎消息。
测试 React 组件的状态
让我们再次编写一个 React 组件并测试它。这个组件的目的是根据点击按钮来将文本从 "Hello" 更改为 "Welcome"。下面是这个组件的源代码：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- --------------- -
----- ------ -------- - ------------------
-------- ------------- -
-------------------
-
------ -
-----
----------- ------------------
------- --------------------------- ------------
------
--
-
------ ------- ---------在这个组件中，我们使用了 React Hooks 来管理组件的状态。我们使用 useState 函数来在组件中进行状态管理。
现在，我们来编写测试代码以测试该组件是否能够在按钮点击后正确地更改状态。下面是这个测试代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ -------- ---- -------------
------------------ ----------- -- -- -
---------- ------ ---- ---- ------- -- --------- ----- ------ ------- -- -- -
----- ------- - ----------------- ----------- ----
----- ------ - -----------------------
------------------------------------------------- --------
-------------------------
--------------------------------------------------- --------
---
---在上面的代码中，我们使用了 shallow 函数来获得组件的输出结果。然后，我们检查初始状态下组件是否呈现值为 "Hello" 的文本。接下来，我们找到组件中的按钮元素并模拟点击事件。最后，我们检查是否已正确更改值为 "Welcome" 的文本。
总结
在本文中，我们学习了如何使用 Enzyme 进行 React 组件测试。我们使用了浅渲染来进行组件测试，并使用了 Enzyme 的查找功能来获取组件的子元素，从而进行更详细的测试。我们还学习了如何测试 React 组件的状态，以确保组件能够按预期运行。这个测试实例很简单，但是它可以被应用于更复杂的应用程序中，以确保它们能够正常运行。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6485870148841e989445482f