Enzyme 中如何进行 React 组件的状态测试？
前言
在编写 React 应用程序时，React 组件的状态是至关重要的。这些状态可能影响您的 UI 呈现，同时也会影响用户与应用程序的交互。因此，在开发和测试 React 应用程序时，我们需要知道如何测试组件的状态。本文将介绍如何使用 Enzyme 进行 React 组件的状态测试。
什么是 Enzyme？
Enzyme 是 Airbnb 公司开发的用于 React 应用程序的 JavaScript 测试实用程序库。它为开发人员提供了一组工具，可以轻松地测试 React 组件的行为和呈现。Enzyme 提供了 DOM 仿真 API 的抽象，可以轻松地测试 React 组件的行为和呈现。
Enzyme 的优势
Enzyme 具有以下优势：
易于使用：Enzyme 是一组简单易用的工具，可以轻松地集成到您的 React 应用程序中。
强大的 API：Enzyme 提供了强大的 API，可以轻松地测试 React 组件的行为和呈现。
支持多种测试：Enzyme 支持多种测试方式，包括单元测试、集成测试和端到端测试。
社区活跃：Enzyme 是一个活跃的社区，因此您可以轻松地找到实用的示例和文档。
测试组件状态的方式
在 Enzyme 中，有两种测试组件状态的方式：
setState方法props属性
setState 方法测试
setState 是 React 中用于更新组件状态的方法。您可以使用 setState 方法测试组件状态。在进行状态测试之前，请确保安装了 Enzyme 。
首先，让我们创建一个简单的 React 组件 TestComponent。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- ------------- ------- --------- -
------------------ -
-------------
---------- - - ------ - --
---------------- - ----------------------------
-
------------- -
----------------------- -- -- ------ --------------- - - ----
-
-------- -
------ -
-----
--------- ----------------------
------- ----------------------------------- --------------
------
--
-
-
------ ------- --------------在此代码中，我们定义了一个 state 属性 count，该属性存储当前的计数值。TestComponent 渲染一个包含当前计数值的段落和一个用于增加计数值的按钮。当用户单击按钮时，setState 方法将被调用并更新 count 状态值。
接下来，我们将编写一个测试用例，该测试用例测试组件的状态值是否正确更新。在进行测试之前，请安装 Enzyme 和 Jest。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------------- ---- ------------------
------------------------- -- -- -
---------- -------- ----- ---- ------ -- --------- -- -- -
----- ------- - ---------------------- ----
----- ------ - -----------------------
-------------------------
------------------------------------------
---
---在此代码中，我们定义了一个新的测试用例，该用例测试 TestComponent 中的 count 状态是否正确更新。我们使用 shallow 方法来创建 TestComponent 的单元测试实例，并将其存储在变量 wrapper 中。
然后，我们使用 find 方法查找 TestComponent 中的按钮元素，并使用 simulate 方法模拟单击事件。最后，我们使用 state 方法获取 TestComponent 的状态对象，并使用 Jest 中的 toEqual 方法将其与预期值进行比较。
props 属性测试
除了使用 setState 方法，您还可以测试组件的 props 属性。在组件中，props 属性是用于从父组件向子组件传递数据的对象。父组件可以将 props 属性传递给子组件，使得子组件可以使用这些值。
让我们再次考虑上面的示例 TestComponent 组件。在此示例中，我们将通过 props 将 count 值传递给 TestComponent，如下所示：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- ------------- ------- --------- -
------------------ -
-------------
---------- - - ------ ----------- --
---------------- - ----------------------------
-
------------- -
----------------------- -- -- ------ --------------- - - ----
-
-------- -
------ -
-----
--------- ----------------------
------- ----------------------------------- --------------
------
--
-
-
------ ------- --------------在此代码中，我们添加了一个构造函数，该函数将 props 作为输入参数，并使用这些 props 来初始化组件的状态 count。
接下来，我们将编写一个新的测试用例，该测试用例将测试 TestComponent 的 props 属性是否正确设置。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------------- ---- ------------------
------------------------- -- -- -
---------- ------ ---- ----- ----------- -- -- -
----- ------- - ---------------------- --------- ----
--------------------------------------------------
---
---在此代码中，我们使用 shallow 方法创建 TestComponent 的单元测试实例，并将 count 设置为 0。
然后，我们使用 instance 方法获取 TestComponent 的实例，并使用 props 属性获取其 props 对象。最后，我们使用 toEqual 方法将 props.count 与预期值进行比较。
结论
在本文中，我们介绍了如何使用 Enzyme 测试 React 组件的状态。我们了解了如何使用 setState 和 props 测试组件状态，并创建了多个测试用例来演示这些测试。
正确测试 React 组件的状态对于编写高质量的 UI 和交互式应用程序非常重要。通过使用 Enzyme 提供的工具，我们可以轻松地测试组件的状态，从而确保我们的应用程序最终实现了我们预期的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671fd1622e7021665effa219