Enzyme 是 Facebook 官方出品的一个 React 组件测试工具库。它提供了一系列 API 可以较容易地模拟操作 React 组件，并对组件输出进行断言。其中，shallow 是 Enzyme 中最为常用的 API 之一。
在本文中，我们将介绍使用 Enzyme 中的 shallow 显示断言，以及它的作用和用法，以便前端开发者能够更好地理解和应用它。
什么是 Enzyme
Enzyme 是一个 React 组件测试工具库。它由 Airbnb 开源，并在后来被 Facebook 接手维护。Enzyme 提供了一系列 API，可以用来模拟React 组件的操作，并对输出结果进行断言。其特点是易于使用和高可读性。
什么是 shallow
在 Enzyme 中，shallow 是最为常用的一个 API 之一。shallow 可以模拟渲染组件的过程，但仅会渲染出当前组件的直接子组件，而不会继续渲染嵌套组件。
shallow 的作用是快速渲染出组件的直接子组件，从而对这些组件进行操作和断言。
如何使用 shallow
使用 shallow 具有很高的灵活性。可以通过传递一个 React 组件或函数，或者一个 DOM 元素来创建一个 shallow wrapper。下面是一个基本的代码示例：
-- -------------------- ---- -------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - -------------------- ----
----------------------------------
---
---在上面的代码中，我们首先导入了 Enzyme 库，然后通过 shallow 函数去创建一个浅层渲染器，它返回一个带有多个方法的对象。其中，第一个参数是需要测试的 React 组件。我们在这个测试用例中声明了一个 MyComponent 组件，并将它作为 shallow 的参数，创建了一个 wrapper 对象。
创建 wrapper 对象后，我们就可以对它进行断言了。在这个例子中，我们将 wrapper 对象传递给了 expect 函数，然后调用了 toMatchSnapshot 方法，对输出结果进行了断言。这个 toMatchSnapshot 方法会记录当前 React 组件的渲染结果，并将结果与以前记录的结果进行比较。
除了 toMatchSnapshot 方法，Enzyme 还提供了许多其它 API，如 find、simulate、props、state 等，可以在测试中方便地操作和测试 React 组件。
示例代码
下面是一个更为详细的示例代码，它演示了如何使用 shallow API 对 React 组件进行测试。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------- ---- ------------
------ ------ ---- -----------
------------------- -- -- -
---------- ------ - ----- ----- -- -- -
----- ------- - ---------------- ----
-----------------------------------
---
---------- ------ --- -------- ------------ -- -- -
----- ------- - ---------------- ----
---------------------------------------------
---
---------- ---- --- ------- ------- ---- --- ------ -- --------- -- -- -
----- ----------- - ----------
----- ------- - --------------- --------------------- ----
-----------------------------------------
---------------------------------------
---
---在这个测试用例中，我们首先导入了 React 和 Enzyme 库，并且声明了一个 Toolbar 组件和一个 Button 组件，用来测试。
在第一个测试中，我们使用 shallow 函数创建了一个 wrapper 对象，并测试了该对象是否是一个
在第二个测试中，我们测试了 <toolbar> 组件是否渲染了两个 <button> 组件。find 方法可以用来查找子组件，这里我们使用了 Button 组件作为 find 方法的参数，并使用 toHaveLength 方法断言结果是否为 2。
在第三个测试中，我们测试了当 <button> 组件被点击时，是否调用了 handleClick 函数。simulate 方法可以模拟事件，这里我们使用了 simulate("click") 方法模拟了按钮被点击的事件。expect 方法和 toHaveBeenCalled 方法可以用来检测这个 handleClick 函数是否被调用。
小结
在本文中，我们介绍了 Enzyme 和 shallow API 的作用和用法，并给出了一个详细的示例。使用 Enzyme 和 shallow API，可以非常方便地测试 React 组件，保证代码的质量和可靠性。我们相信，对于前端开发者来说，这些内容会非常有帮助，帮助大家更好地使用 Enzyme 中的 shallow 显示断言，提高测试工程的效率和质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c93855e46428fe9e054f76
