在 Jest 中测试 React 中的 redux 状态管理
在 React 中使用 Redux 进行状态管理是一个非常流行的选择，Redux 具有方便的状态注入和在组件之间传递数据的能力。但是，在多个组件中使用 Redux 可能会导致错误和不一致的状态，因此测试这些状态变得至关重要。
Jest 是一个流行的测试框架，它提供了方便的方式来测试 React 组件中的状态管理。在本文中，我们将介绍如何在 Jest 中测试 React 中的 Redux 状态管理。
首先，我们需要安装 Redux、React-Redux 和 Jest。启动一个基础的 React 应用程序，然后将其与 Redux 集成。你可以使用如下步骤来安装 Redux 和 React-Redux：
npm install redux react-redux
接下来，让我们创建一个简单的 Redux 状态：
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- ------------ - - ------ - --
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
--
----- ----- - ---------------------
------ ------- ------这是一个非常简单的计数器，它将从 Redux 状态中存储一个 count 值，并提供一个 increment 操作。接下来，让我们在组件中使用它：
-- -------------------- ---- -------
------ - ------------ ----------- - ---- --------------
------ ----- ---- ----------
-------- --------- -
----- ----- - ------------------- -- -------------
----- -------- - --------------
------ -
-----
------- ----------- -- ---------- ----- ----------- ----------------------
------------------
------
--
-
------ ------- -------- ----- -
------ -------- ---
-这是一个非常基本的组件，它将 Redux 中的计数器装入一个按钮和一个计数器中。现在，我们可以编写 Jest 测试用例来测试这个组件是否正常工作。
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- --------------
------ - ------- --------- - ---- ------------------------
------ ------- ---- ------------
------ ----- ---- ----------
------------------- -- -- -
-------------- ---- ------ -- --------- -- -- -
----- - ---------- ----------- - - -------
--------- --------------
-------- --
-----------
--
----- --------------- - -----------------------
----- ------------ - ---------------------
---------------------------------
-------------------------------------------
---
---在这个例子中，我们使用了 render 函数将计数器组件渲染到 Dom 中；getByText 函数将获取 Increment 按钮，getByTestId 函数将获取指定的元素 ID，并使用 fireEvent 模拟按钮点击事件。最后，使用 expects 语句检查计数器是否已成功增加。
总结
在本文中，我们演示了如何使用 Jest 测试 React 中的 Redux 状态管理。包括安装 Redux 和 Jest、初始设置，创建一个基础的 Redux 状态与在组件中使用它、和最后使用 render 函数访问组件，并使用 fireEvent 模拟按钮点击以测试之。这将确保我们的组件正在正确地处理并响应状态更改。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6496d78c48841e9894409c58