在 React 开发中，测试是一项非常重要的工作。而 Jest 则是一个非常流行的测试框架。它可以方便地测试各种组件和函数。本文将详细介绍如何使用 Jest 测试 React 组件的状态变化。
理解状态
在 React 中，每个组件都有自己的状态。状态是组件数据的一个重要来源。状态可以随着时间的推移而改变，从而影响组件呈现的结果。例如表单，点击按钮或根据 API 请求更新数据等情况都可以触发状态变化。
在 React 中，状态是通过 setState() 方法来更新的。setState() 方法会改变组件的状态，并触发组件的重新渲染。在测试中，我们需要检查状态是否以预期的方式更新。
编写测试用例
我们来看一个简单的计数器组件的例子，用于演示如何进行状态测试。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- ------- ------- --------- -
------------------ -
-------------
---------- - -
------ -
--
-------------------- - --------------------------------
-------------------- - --------------------------------
-
----------------- -
---------------
------ ---------------- - -
---
-
----------------- -
---------------
------ ---------------- - -
---
-
-------- -
------ -
-----
----------------
--------- ----------------------
------- ------------------------------------------
------- ------------------------------------------
------
--
-
-
------ ------- --------该组件有两个按钮：一个按钮可以增加计数器的值，另一个按钮可以减少计数器的值。现在我们来编写测试用例来确保计数器在状态更改时正确工作。
安装 Jest
在开始之前，我们需要安装 Jest。可以在终端中运行以下命令进行安装：
npm install --save-dev jest
编写测试用例
我们将编写两个测试用例：一个测试增加计数器的值，另一个测试减少计数器的值。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------- ---- ------------
----------------- ----------- -- -- -
-------------- ------- -- -- -
----- ------- - ---------------- ----
----- --------------- - -----------------------------
----------------------------------
----- --------- - -------------------------
--------------------------------- ----
---
-------------- ------- -- -- -
----- ------- - ---------------- ----
----- --------------- - -----------------------------
----------------------------------
----- --------- - -------------------------
--------------------------------- -----
---
---第一个测试用例测试增加计数器的值，第二个测试用例测试减少计数器的值。在测试中，我们首先使用 Enzyme 对组件进行浅层渲染（shallow rendering）。
然后，我们在第一个测试中找到第一个按钮并模拟单击。接下来，我们检查状态是否更新为预期值。相反，在第二个测试中，我们找到第二个按钮并模拟单击。然后我们再次检查状态是否更新为预期值。
这些测试确保计数器在状态更改时以预期方式工作。
结论
Jest 可以方便地测试 React 组件的状态变化。在测试中，我们用 Enzyme 对组件进行浅层渲染，并模拟组件交互以触发状态更改，最后检查状态是否以预期的方式更新。这些测试确保组件在状态更改时总是按照预期工作。
希望这篇文章对正在学习 Jest 以及 React 测试的读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6749919aa1ce006354670358