React 是一个开源的 JavaScript 库，用于构建用户界面。Enzyme 是一个流行的测试工具，用于测试 React UI 组件。在本文中，我们将使用 Enzyme 来创建一个基本的 React 组件，并演示如何在其中添加生命周期方法和状态管理。
前置条件
在开始本文之前，您需要：
- 了解 React 和 Enzyme 的基础知识。
- 在本地安装 Node.js 和 NPM。
步骤
第一步：创建 React 应用程序
首先，我们需要创建一个新的 React 应用程序。在终端窗口中，运行以下命令：
npx create-react-app enzyme-example
这将创建一个名为 enzyme-example 的新目录，其中包含一个空的 React 应用程序。
进入该目录，运行以下命令启动应用：
cd enzyme-example npm start
您将在浏览器中看到一个显示“Hello, World！”的页面。
第二步：安装 Enzyme
接下来，我们需要安装 Enzyme。运行以下命令：
npm install --save-dev enzyme enzyme-adapter-react-16
这将安装 Enzyme 和与 React 16 兼容的适配器。现在我们可以开始使用 Enzyme 来测试我们的 React 组件。
第三步：创建一个简单的 React 组件
让我们创建一个简单的 React 组件，我们将使用它来演示 Enzyme 的一些功能。
在 src 目录中创建一个名为 MyComponent.js 的新文件，并输入以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- ----- ----------- ------- --------------- -
-------- -
------ -
----------- ------------
--
-
-这是一个最基本的 React 组件。它将呈现一个包含“Hello, World！”文本的 <div> 元素。
第四步：测试 React 组件
现在，我们已经创建了一个简单的 React 组件，让我们使用 Enzyme 编写一些测试。
在 src 目录中创建一个名为 MyComponent.test.js 的新文件，并输入以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ ----------- -- -- -
----- --------- - -------------------- ----
------------------------------------
---
---这是一个非常基本的测试，它检查 <MyComponent> 组件是否会正确呈现我们在第三步中定义的内容。我们使用 shallow 函数来浅渲染组件，并使用 Jest 的 toMatchSnapshot() 断言方法来检查组件是否与快照匹配。
运行以下命令来运行测试：
npm test
如果一切正常，您将看到一个类似于以下内容的输出：
Test Suites: 1 passed, 1 total Tests: 1 passed, 1 total Snapshots: 1 passed, 1 total Time: 1.272s, estimated 2s
这表明我们的测试已经通过。
第五步：添加 State 和生命周期方法
我们已经成功测试了一个简单的 React 组件，现在我们尝试通过添加一些生命周期方法和状态来扩展它。
在 MyComponent.js 文件中，更新代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- ----- ----------- ------- --------------- -
------------------ -
-------------
---------- - -
------ --
--
-
------------------- -
---------------------- -----------
-
---------------------- -
---------------------- ---- -----------
-
----------- - -- -- -
----------------------- -- --
------ --------------- - --
----
--
-------- -
----- - ----- - - -----------
------ -
-----
---------- ------ -----------
------- ---------------------------------------------
--- --
--- --
----------- ------------
------
--
-
-我们添加了一个名为 count 的状态，该状态将跟踪用户单击“Increment”按钮的次数。我们还添加了 handleClick() 方法，该方法将在单击按钮时更新状态。我们还添加了两个生命周期方法，componentDidMount() 和 componentWillUnmount()，它们在组件挂载和卸载时分别触发。
第六步：测试添加的内容
我们已经更新了 <MyComponent> 组件，让我们使用 Enzyme 编写另外两个测试。
在 MyComponent.test.js 文件中，更新代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ ----------- -- -- -
----- --------- - -------------------- ----
------------------------------------
---
---------- ---- - ------ ---- ---------- --- ------- -- -- -
----- --------- - -------------------- ----
----- ------ - -------------------------
--------------------------------------------
-------------------------
--------------------------------------------
-------------------------
--------------------------------------------
---
---------- --- - ------- ---- ------- --- ----------- -- -- -
----------- - ----------
----- --------- - -------------------- ----
--------------------------------------------------- -----------
--------------------
--------------------------------------------------- ---- -----------
---
---第一个测试确保按钮增加计数器的功能正确工作。我们使用 component.find() 方法来获取按钮，然后模拟单击事件并检查计数器的状态是否增加。
第二个测试确保在挂载和卸载组件时，生命周期方法会正确触发。我们使用 Jest 的 console.log() 组件来捕获输出并检查预期日志消息。
运行以下命令来运行所有测试：
npm test
如果一切正常，您将看到类似于以下内容的输出：
Test Suites: 1 passed, 1 total Tests: 3 passed, 3 total Snapshots: 1 passed, 1 total Time: 1.474s, estimated 2s
总结
在本文中，我们使用 Enzyme 和 React 创建了一个基本的组件，并演示了如何在其中添加状态和生命周期方法。我们了解了如何使用 Jest 和 Enzyme 来编写测试，以确保我们的组件正在按预期工作。这是基于 Enzyme 实现 React 组件的创建事例，它有深度和学习以及指导意义，希望能对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6494ffb048841e9894247413