在开发 React 项目中，Redux 经常被用作应用程序状态管理工具。但是，如何为 Redux 编写测试是一个值得探讨的问题。在这篇文章中，我们将讨论如何使用 Jest 测试 Redux 的应用程序。
确定测试类型
在测试 Redux 应用程序时，有两种测试类型：单元测试和集成测试。单元测试旨在测试 Redux 的功能和逻辑。集成测试旨在测试整个应用程序的工作流程和用户界面。
对于单元测试，我们将使用 Jest 来测试 Redux 的常规功能，如 reducer、action 和 store。对于集成测试，我们可以使用 Jest 和 Enzyme。
单元测试
reducer
reducer 是 Redux 的关键部分，它控制着应用程序的状态。为了测试 Redux reducer，我们需要编写测试用例来检查 reducer 是否按照预期工作。
考虑以下的 reducer，它会增加数字的值：
----- --------- - ------------
----- ------- - ------ - -- ------- -- -
------ ------------- -
---- ----------
------ ----- - --
--------
------ ------
-
-
------ ------- --------我们可以编写以下测试用例来测试这个 reducer：
------ ------- ---- -----------
------------------- -- -- -
-------------- --- ------- -- -- -
----- ------ - ------ -------------
----- ------------ - --
----- -------- - --------------------- --------
----------------------------
---
----------- --- ------- ----- -- ------ ---- -- --------- -- -- -
----- ------ - ------ -----------
----- ------------ - --
----- -------- - --------------------- --------
---------------------------------------
---
---这个测试用例使用 describe 和 it 语句来组织测试。第一个测试用例检查 reducer 是否按预期增加值，第二个测试用例检查 reducer 是否如预期返回当前状态。
action
action 是用于描述应用程序中发生的事件的普通 JavaScript 对象。在 Redux 中，action 用于触发 reducer 的更新。为了测试 Redux action，我们需要编写测试用例来确保 action 产生预期的结果。
考虑以下的 action，它用于增加数字的值并返回一个简单的对象：
----- --------- - ------------
----- --------- - -- -- -
------ -
----- ---------
-
-
------ ------- ----------我们可以编写以下测试用例来测试这个 action：
------ --------- ---- -----------
------------------- -------- -- -- -
----------- -- ------ -- ----------- -- -- -
----- -------------- - -
----- -----------
-
--------------------------------------------
---
---这个测试用例使用 describe 和 it 语句来组织测试。这个测试用例检查 action 是否返回预期的结果。
store
store 是 Redux 应用程序的状态。为了测试 Redux store，我们需要编写测试用例来确保 store 正确地存储应用程序的状态。
考虑以下的 store，它将应用程序的状态初始化为数字 0。
------ ------------- ---- -------- ------ ------- ---- ------------ ----- ----- - -------------------- --- ------ ------- ------
我们可以编写以下测试用例来测试这个 store：
------ ----- ---- ----------
------ --------- ---- -----------
----------------- -- -- -
-------------- --- ------- -- -- -
----------------------------
------------------------------------
---
----------- --- ------- ------- -- -- -
------------------------------------
---
---这个测试用例使用 describe 和 it 语句来组织测试。第一个测试用例检查 store 是否按照预期工作，第二个测试用例检查 store 是否如预期返回当前状态。
集成测试
对于集成测试，我们可以使用 Jest 和 Enzyme 来测试整个 React 应用程序的工作流程和用户界面。接下来，我们将编写一个简单的示例来测试一个使用 Redux store 的 React 组件。
首先，让我们创建一个简单的组件，它将数字的值显示出来。
------ ----- ---- -------- ------ --------- ---- -------------- ----- --------------- - ----- -- -- ------ ----- --- ----- ------- - --------- -- - ------------------ -- ------ ------- ----------------------------------
这个组件连接到 Redux store 并使用 mapStateToProps 函数将 store 中的值传递到组件中。
接下来，我们将编写测试用例来测试这个组件的工作。
------ ----- ---- --------
------ ---------- ---- --------------
------ --------- ------ ---- ---------
------ ------ ---- -----------------
------ ------------------ ---- -------------------
------ ------- ---- ------------
------ ----- ---- ----------
----- --------- - ---------------------
----- ------------ - --
----- ----- - ------------------------
------------------ ---- -- -- -
----------- ----------- -- -- -
----- ------- - ---------------- -----------------
------------------------------------------
---
----------- --- ----- ---- --- ------- -- -- -
----- ------- - ------
--------- --------------
-------- --
-----------
--
-----------------------------------------------
---
---这个测试用例使用 describe 和 it 语句来组织测试。第一个测试用例检查组件是否正确渲染，第二个测试用例检查组件是否显示了 store 中的值。
结论
在这篇文章中，我们讨论了如何使用 Jest 测试 Redux 的应用程序。我们看到如何测试 reducer、action 和 store，以及如何使用 Jest 和 Enzyme 来进行集成测试。这些测试用例可以确保 Redux 应用程序按照预期工作，并提供了一种可靠的方式来测试应用程序的完整性。
希望这篇文章可以对你有所帮助。由于 Redux 的复杂性，我们建议在编写测试用例之前阅读 Redux 的文档。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6714ff18ad1e889fe2168c5c