React 是一种基于组件化和状态管理的前端框架。它的组件化特征让代码更加模块化、可维护性更高；而状态管理的特性则使得应用状态的变化更加可控，更加易于调试。然而，为了确保 React 应用程序的质量，我们必须对其进行单元测试。在本文中，我们将介绍 Enzyme 这一测试工具，并指导您如何使用它测试 React 组件的 props 和 state。
Enzyme 简介
Enzyme 是一种流行的 React 组件测试工具。它提供了一些强大的 API，方便我们迭代和测试 React 组件。通常我们可以使用三种不同的 Enzyme API 进行单元测试：
- Shallow rendering：此方法允许我们测试组件的一个层次结构的渲染结果，不包括子组件。此方法可以最大程度地优化测试速度和可读性。
- Full DOM rendering：此方法使用 jsdom 为组件提供一个真实的 DOM 环境。它使得我们能够模拟用户使用实际应用程序的情况，但它的测试速度较慢。
- Static rendering：此方法允许我们将组件渲染成静态 HTML 字符串，使得测试速度更快。但它不支持交互，也不支持组件的生命周期方法。
在继续讨论之前，让我们先看一个 React 组件的示例：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- ----------- ------- --------- -
------------------ -
-------------
---------- - -
------ -
--
-
----------- - -- -- -
------------------ -- --
------ ---------- - -
----
--
-------- -
----- - ---- - - -----------
----- - ----- - - -----------
------ -
-----
--------- --- ------- ------- ----------
------- -------------------------------- -----------
------
--
-
-
------ ------- ------------在上面的代码中，我们创建了一个名为 MyComponent 的 React 组件。它接受一个 name 属性并将其显示在屏幕上，同时它还拥有一个 count 状态，表示用户点击了多少次 button 按钮。当用户点击 Click me 按钮时，它会将 count 值加 1 并更新状态。
测试 props
我们首先将关注于测试组件的属性。为了完成此操作，我们需要使用 Enzyme 提供的 shallow 方法来浅渲染组件。接着，我们可以遍历至每个数据节点并检查它们是否存在于 DOM 中。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------- ------------- -- -- -
---------- ------ --- ---- ---------- -- -- -
----- ------- - -------------------- ---------- ----
----- ---- - -------------------------
------------------------- --- ------- - ---------
---
---在上面的示例中，我们创建了一个浅渲染的组件，并在它上面设置了一个 name 属性。接着，我们查找到 p 标签并检查其中的文本内容是否正确。在本例中，我们希望看到 Joy has clicked 0 times. 这个字符串，因为我们的 count 值为 0。
测试 state
测试组件的 state 可能会比测试属性更加复杂。在我们的示例代码中，当用户点击 button 按钮时，组件的 count 值会增加。如何编写测试代码来检查这个变化呢？
可以使用 Enzyme 提供的 simulate() 方法模拟点击行为。在此方法中，我们可以向事件传递任何需要的信息。此方法接受一个事件名作为第一个参数和一个模拟事件对象作为第二个参数。
在我们的示例代码中，虽然我们的组件依赖于一个函数来更新 state，但我们不能直接访问它。取而代之的是，我们可以将这个函数作为一个 spy 传递给组件。（本代码使用 jest.fn() 作为 spy）。接下来，我们将呼叫这个 spy，并检查其是否被调用，以及 state 是否被正常更新。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------- ------------- -- -- -
---------- -------- --- ----- ----- ---- --------- -- -- -
----- ------- - -------------------- ---------- ----
----- ------ - -----------------------
----- --- - ------------------------------ ---------------
-------------------------
-------------------------------
------------------------------------------
-------------------------
------------------------------------------
---
---在上面的示例代码中，我们首先找到了我们的按钮，并将其存储在一个变量中。我们创建了一个函数 spy 来监视 handleClick 函数是否被调用。当按钮被点击时，它将调用这个函数，将值从 0 增加到 1，然后到 2。我们需要检查两个事情：第一，函数的调用情况；第二，state 是否被正确更新。
总结
在本文中，我们介绍了 Enzyme，这是一种流行的 React 组件测试工具。我们展示了如何使用 Enzyme 的浅渲染机制进行属性测试，并用 Enzyme 的模拟点击行为方便地检查了状态的更新。测试是代码质量的重要组成部分，使用 Enzyme 让测试 React 组件更加轻松、更加优雅。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64df00c3f6b2d6eab3a24a1b