介绍
Enzyme 是一个 React 组件测试工具，它提供了许多简单强大的方法来模拟 React 组件的行为，使得测试 React 组件变得轻松愉悦。 Jest 是一个用于编写 JavaScript 应用程序的测试框架，它是 Facebook 出品的，许多公司都在使用它，Jest 提供了一种易于集成和使用的方式来编写测试。
在此技术文章中，我们将学习如何使用 Enzyme 和 Jest 的组合，来测试您的 React 组件。我们将介绍 Enzyme 的基础知识，以及如何编写测试，以便您在编写 React 应用程序时，能够更轻松地维护和测试代码。
Enzyme 的基础知识
Enzyme 允许您使用简单而直观的 API 来模拟和操作 React 组件。这使得测试变得更加可读、稳定和易于维护。
安装
在使用 Enzyme 之前，我们需要先安装它。您可以使用 npm 或 yarn 来安装 Enzyme。
npm install enzyme --save-dev 或 yarn add enzyme --dev
社区支持
Enzyme 是由 Airbnb 的工程师编写的。这种支持使它成为社区中广受欢迎的测试工具之一，并且它与 React 一起提供了很好的集成，可以验证 Redux 状态、模拟事件、延迟渲染和更多功能。
测试类型
Enzyme 允许您测试 React 组件的三种类型：
- 测试组件的行为——例如根据点击事件更新状态
- 测试组件的状态——例如确保组件状态为 correct
- 测试组件的渲染输出——例如匹配快照
Wrapper
Enzyme 提供了一个名为 Wrapper 的东西，它是一个轻量级的包装器，允许您轻松地渲染组件并测试组件的输出。当您测试 React 组件的行为时，Wrapper 可以方便地情况组件状态或 props。
编写测试
在将组件添加到您的 React 应用程序之前，为组件编写测试是一种最佳实践。
计数器组件示例
这里我们以一个简单的计数器组件为例：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
----- ------- - -- -- -
----- ------- --------- - ------------
------ -
-----
---------- ------------
------- ----------- -- -------------- - ------- ----------
------
--
--我们可以使用 Enzyme 和 Jest 编写一个测试，以检查该组件是否按预期增加计数器：
-- -------------------- ---- -------
------ - ------- - ---- --------- -- ----
------ ------- ---- ------------
----------------- ----------- -- -- -
---------- ---- ----- --- -- -- -
----- ------- - ---------------- ----
----- ---- - --------------------------
---------------------------- ----
---
-------------- ----- ---- ------ -- --------- -- -- -
----- ------- - ---------------- ----
----- ------ - -----------------------
-------------------------
----- ---- - --------------------------
---------------------------- ----
---
---运行测试
在编写测试后，我们需要运行它们。使用 Jest，您可以运行以下命令来运行测试：
npm run test
结果将输出测试结果，以及任何失败测试的详细信息。
结论
使用 Enzyme 和 Jest 可以轻松测试 React 组件。我们可以模拟和操作组件，以测试其行为和渲染输出。在 React 应用程序中添加测试是一种最佳实践，可以确保高质量的代码，并帮助您更快地发现并解决错误。
希望这篇技术文章对您有所帮助，并且能够了解如何在编写 React 应用程序时使用 Enzyme 和 Jest 的组合，以便于编写高质量的测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6736e9580bc820c582570fdb