在 React 开发中，组件的状态（state）往往是非常重要的一部分。测试组件的状态是基本的测试要求之一。Enzyme 是一个流行的用于 React 组件测试的库，它提供了一些有用的用于测试组件状态的 API。
安装 Enzyme
在开始之前，我们需要先安装 Enzyme。使用 npm：
npm install --save-dev enzyme enzyme-adapter-react-16
Enzyme 要求您传递一个“适配器（adapter）”，以帮助 Enzyme 了解要测试的 React 版本。我们使用的是 React 16 版本，因此我们将适配器设置为 enzyme-adapter-react-16。
测试组件状态
Enzyme 提供了几个 API 来测试组件中的状态：
setState(newState, callback)- 设置新的状态并执行回调函数。state()- 返回当前状态对象。instance()- 返回组件实例。props()- 返回当前 props 对象。
现在我们将创建一个简单的 React 组件来演示如何使用 Enzyme 测试状态。
-- -------------------- ---- -------
------ ----- ---- --------
----- ------- ------- --------------- -
------------------ -
-------------
---------- - -
------ --
--
---------------- - ----------------------------
-
------------- -
---------------
------ ---------------- - --
---
-
-------- -
------ -
-----
-------------------------
------- ---------------------------------------------
------
--
-
-
------ ------- --------这是我们要测试的组件。这个计数器组件有一个按钮，用于增加计数器的当前值。
测试组件的初始状态
我们可以使用 Enzyme 的 shallow 函数来渲染组件，并使用 .state() API 来获取组件的当前状态。
-- -------------------- ---- -------
------ - ------- - ---- ---------
------ ------- ---- ------------
------------------- -- -- -
---------- ----- ---- - ----- -- --- -- -- -
----- ------- - ---------------- ----
----- ---------- - -----------------------
------------------------------
---
---这里我们使用了 shallow 函数来渲染 Counter 组件，并使用 .state() 函数来获取组件的初始状态。然后，我们可以使用 Jest 的 toEqual() 函数断言它的值是否等于 0。
测试组件状态的更新
在这个例子中，我们使用 simulate() API 模拟单击按钮事件，然后使用 .state() 函数获取更新后的状态。
-- -------------------- ---- -------
------ - ------- - ---- ---------
------ ------- ---- ------------
------------------- -- -- -
---------- --------- ----- -- - -- ------ ------- -- -- -
----- ------- - ---------------- ----
----- ------ - -----------------------
-------------------------
----- ---------- - -----------------------
------------------------------
---
---这里我们首先使用 shallow 函数渲染组件。然后，我们查找按钮并使用 .simulate() 函数模拟单击事件。最后，我们使用 state() 函数获取更新后的计数器值，并使用 Jest 的 toEqual() 函数进行断言。
测试组件实例
我们可以使用 instance() 函数来获取 React 组件的实例，并调用其方法。
-- -------------------- ---- -------
------ - ------- - ---- ---------
------ ------- ---- ------------
------------------- -- -- -
---------- --------- ----- -- - -- ------ ------- -- -- -
----- ------- - ---------------- ----
----- -------- - -------------------
----------------------------------------
-----------------------
----------------------------------------
---
---这里我们使用 shallow 函数渲染组件，并使用 instance() 函数获取其实例。然后，我们可以通过实例使用 handleClick() 函数更新组件状态，并使用 state() 函数进行断言。
测试组件 props 的影响
我们可以使用 setProps() 函数设置新的 props，并使用 .state() 函数获取更新后的状态。
-- -------------------- ---- -------
------ - ------- - ---- ---------
------ ------- ---- ------------
------------------- -- -- -
---------- ------ ----- ---- ----- -------- -- -- -
----- ------- - ---------------- ----
------------------ ------ -- ---
----- ---------- - -----------------------
-------------------------------
---
---这里我们使用 shallow 函数渲染组件，并使用 setProps() 函数设置新的 props。然后，我们可以使用 state() 函数获取更新后的计数器值，并使用 Jest 的 toEqual() 函数断言其值是否等于新的 props 值。
结论
Enzyme 提供了一些有用的 API 来测试 React 组件中的状态。您可以使用这些 API 来测试组件的初始化状态、状态的更新以及 props 对状态的影响。
希望这篇文章能够帮助您更好地理解 Enzyme 中如何测试 React 组件中的状态。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fbd2494471362601643e49