当开发前端应用时，测试是不可避免的一部分。测试可以确保我们的应用在各种情况下都有正确的行为。Enzyme 是 React 应用程序测试中最流行的工具之一。该工具包提供了用于渲染、搜索和交互 React 组件的工具。Enzyme 的 mount 方法允许您将 React 组件挂载到虚拟 DOM 中，并对其进行测试。在本文中，我们将学习如何使用 Enzyme 中的 mount 方法进行显示断言。
安装 Enzyme
要使用 Enzyme 进行测试，我们需要安装它。Enzyme 可以通过 NPM 安装，使用以下命令：
npm install enzyme
我们还需要安装 React 和 Enzyme 的适配器。如果您使用的是 React 16 或更高版本，则需要安装 @enzyme / adapter-react-16：
npm install react @types/react @types/react-dom enzyme @types/enzyme @types/enzyme-adapter-react-16 enzyme-adapter-react-16
了解 mount 方法
Enzyme 的 mount 方法允许您将组件挂载到虚拟 DOM 中。这为您提供了更多的测试能力，因为它允许您测试组件及其子组件的渲染结果和交互。
Enzyme 的 mount 方法返回一个包装容器对象，该对象允许您对组件进行查询和断言。您可以使用此对象检查组件中的元素、props 和状态。
创建测试用例
为了演示 mount 方法的使用，我们将创建一个简单的 React 组件及其测试用例，该组件包含一个数字输入和一个按钮，点击按钮时将数字加 1。
我们将创建一个名为 Counter 的组件，该组件包含一个 state 属性 count，该属性存储当前计数器值。组件包含两个函数，一个用于更新计数器值，另一个用于呈现组件的 HTML。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ------- ----- ------- ------- --------- -
------------------ -
-------------
---------- - -
------ --
--
-
--------------- - -- -- -
------------------------- -- --
------ --------------- - --
----
--
-------- -
------ -
-----
---------------------------
------- -------------------------------------------------
------
--
-
-测试代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ ------- ---- ------------
------------------- -- -- -
--- --------
------------- -- -
------- - -------------- ----
---
------------ -- -
------------------
---
---------- ------ ------- -------- -- -- -
------------------------------------
---
---------- ----- ---- - ----- -- --- -- -- -
----- ----- - --------------------------
---------------------------
---
---------- --------- --- ----- ---- --- --------- ------ -- --------- -- -- -
----- ------ - -----------------------
-------------------------
----- ----- - --------------------------
---------------------------
---
---我们使用 mount 方法将 Counter 组件挂载到虚拟 DOM 中，并使用 beforeEach 和 afterEach 方法执行某些操作，以确保每个测试用例都是独立的。
在第一个测试用例中，我们只测试是否能够正确的渲染 Counter 组件。我们使用 exists 方法来确定包含 Counter 组件的包装器容器是否存在。
在第二个测试用例中，我们检查 Counter 组件是否开始计数器值为 0。我们使用 find 方法查找计数器元素，并使用 text 方法从中提取文本。最后，我们使用 toEqual 比较预期值和实际文本。
在第三个测试用例中，我们测试当单击 Increment 按钮时计数器是否递增。我们使用 find 方法查找按钮元素，并使用 simulate 方法模拟单击事件。最后，我们再次使用 find 方法查找计数器元素，并使用 text 方法从中提取文本。最后，我们使用 toEqual 比较预期值和实际文本。
结论
Enzyme 是 React 应用程序测试中最流行的工具之一。mount 方法允许您将 React 组件挂载到虚拟 DOM 中，并对其进行测试。在本文中，我们学习了如何使用 Enzyme 的 mount 方法进行显示断言，并使用测试用例演示了此方法的用法。通过精心编写测试，可以提高应用程序的稳定性和健壮性，从而降低 bug 和错误的发生率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6734458a0bc820c58248040a