前言
作为前端开发者，我们经常需要进行单元测试，以确保我们编写的代码功能正确性和代码质量。在 React 应用中，Enzyme 是一种流行的测试工具，它可以帮助我们轻松地测试 React 组件。
Enzyme 是由 Airbnb 开发的 React 组件测试工具，它提供了各种选择器和实用程序，以实现简单而强大的组件测试。在本文中，我们将向您展示如何安装 Enzyme，如何编写测试用例以及在 React 组件中使用 Enzyme 的示例。
安装 Enzyme
首先，让我们安装 Enzyme。我们可以使用 npm 包下载和安装 Enzyme。我们将使用 enzyme 包和一个适当的适配器，根据 react 版本不同，还要安装 enzyme-adapter-react-xx。
在本文中，我们使用的是 React 17，所以我们需要安装 enzyme-adapter-react-17。
npm install --save-dev enzyme enzyme-adapter-react-17
编写测试用例
安装 Enzyme 之后，我们可以编写测试用例了。让我们编写一个简单的测试用例来测试一个组件是否正确呈现。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- - ------- - ---- ---------
------ ------- ---- ------------------------------------- -- ---
------ ----------- ---- ----------------
------------------ -------- --- --------- --- -- ------
----------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - -------------------- ----
------------------------------------------------
---
---这个测试用例首先导入我们需要的依赖项。然后，我们使用 configure() 方法实例化适配器，以便我们可以使用 shallow() 方法将组件包装在一个虚拟的 DOM 层次结构中。最后，我们使用 expect() 断言语句来检查返回的 HTML 是否包含 MyComponent。
使用 Enzyme 测试 React 组件
现在，让我们编写一个更复杂的测试用例，以展示 Enzyme 在测试 React 组件方面的实际用途。我们将编写一个组件，它使用 props 来传递要显示的内容，并在下面切换内容。我们将使用 Enzyme 来测试这个组件是否正确呈现，并测试切换内容是否有效。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- - ------- - ---- ---------
------ ------- ---- -------------------------------------
------ ------ ---- ----------- -- --------
------------------ -------- --- --------- ---
---------------- ----------- -- -- -
----------- ------- ------ -- -- -
----- ------- - --------------- ----
----- ------- - --------------------------------
----------------------------- ----------
---
----------- ------ ------ -- -- -
----- ------- - --------------- --------------- -------- ----
----- ------- - --------------------------------
---------------------------- ----------
---
----------- ------- -- ------- -- -- -
----- ------- - --------------- ----
--- ------- - --------------------------------
----------------------------- ----------
-----------------------------------------
------- - --------------------------------
------------------------------- ----------
-----------------------------------------
------- - --------------------------------
----------------------------- ----------
---
---这个测试用例中我们包含了三个测试：
- 第一个测试检查默认情况下组件是否呈现正确的初始值。
- 第二个测试检查当我们传递自定义值时，是否呈现正确的内容。
- 最后一个测试检查在单击按钮时，组件是否正确地切换内容。
我们分别包装组件并使用 find() 方法来查找我们需要的元素，例如 class 为 .content 的元素。我们使用 simulate() 方法来模拟单击事件并测试切换内容时是否有效。
结论
在本文中，我们向您展示了如何安装 Enzyme 和编写测试用例来测试您的 React 组件。我们学习了如何使用 shallow() 方法来包装组件并在组件上进行各种操作。我们还展示了如何检查组件的 HTML 标记是否正确呈现，以及如何测试更复杂的组件的功能。
如果您是一个开发者，Enzyme 是一个必不可少的工具，可以帮助您测试 React 组件。希望这篇文章能够帮助您更好地理解和学习如何使用 Enzyme 进行 React 组件测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672ddbceeedcc8a97c862c81