Redux 是一种流行的状态管理库，它被广泛应用于前端开发中。当我们使用 Redux 时，我们通常需要编写一些单元测试来确保我们的应用程序的正确性。然而，当我们在 Jest 中编写测试时，我们可能需要模拟 Redux store。
本篇文章将介绍如何在 Jest 中模拟 Redux store。我们将讨论如何设置 store，如何编写测试用例，并提供一些示例代码来帮助您更好地理解。
设置 Redux Store
在 Jest 中模拟 Redux store，我们需要首先设置一个 Redux store。我们通常需要定义一个初始状态和一些 reducers：
-- -------------------- ---- -------
----- ------------ - -
------ -
-
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ -
---------
------ ----------- - -
-
---- ------------
------ -
---------
------ ----------- - -
-
--------
------ -----
-
-
----- ----- - --------------------在这里，我们首先定义了一个初始状态，包括一个计数器。接下来，我们编写一个 reducer 函数，以便在收到 'INCREMENT' 或 'DECREMENT' 动作时更新状态。最后，我们使用 createStore 函数创建 Redux store。
有了 Redux store，我们现在可以开始编写一些测试用例。
编写测试用例
现在，让我们编写一些测试用例。我们将演示如何使用 Jest 中的模拟函数来模拟 Redux store，并编写一些简单的测试用例来确保我们的 reducer 正常运行。
-- -------------------- ---- -------
------ - ----------- - ---- -------
----- ------------ - -
------ -
-
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ -
---------
------ ----------- - -
-
---- ------------
------ -
---------
------ ----------- - -
-
--------
------ -----
-
-
------------------- -- -- -
---------- --------- --- ------- -- -- -
----- ------ - - ----- ----------- -
----- ----- - - ------ - -
----- ------------- - - ------ - -
--------------------- -------------------------------
--
---------- --------- --- ------- -- -- -
----- ------ - - ----- ----------- -
----- ----- - - ------ - -
----- ------------- - - ------ -- -
--------------------- -------------------------------
--
--
----------------- -- -- -
--- ---------
------------- -- -
--------- - -------------------- -------------
--
---------- --------- --- ------- -- -- -
----- ----------- - --------------------- -----------
-------------------- ----- ----------- --
------------------------------------------ ----- ----------- --
-------------------------------------- ------ - --
--
---------- --------- --- ------- -- -- -
----- ----------- - --------------------- -----------
-------------------- ----- ----------- --
------------------------------------------ ----- ----------- --
-------------------------------------- ------ -- --
--
--在这里，我们首先定义了两个测试用例，分别测试增加和减少计数器功能。我们使用 Jest 中的 expect 函数来测试我们的 reducer 函数是否按预期工作。
接下来，我们为 store 写了两个测试用例。我们首先创建一个模拟 Redux store，然后分别测试 INCREMENT 和 DECREMENT 动作是否按预期工作。我们使用 dispatch() 函数来发送动作，然后测试 getState() 函数是否返回正确的状态。
注意在 beforeEach() 中创建 mockStore 的目的是避免前一个测试用例对后一个测试用例产生影响。这是因为每次测试完毕后，我们都需要重置 state。
结论
在本篇文章中，我们介绍了如何在 Jest 中模拟 Redux store 并编写测试用例。我们学习了如何设置 store，如何编写 reducer 函数以及如何使用模拟函数来模拟 Redux store。我们编写了两个简单的测试用例，并提供了一些示例代码来帮助您更好地理解。
当您开始编写前端单元测试时，模拟 Redux store 是一个非常重要的问题。无论您是要测试 reducer 函数还是测试 Redux actions，模拟 Redux store 都将帮助您轻松测试您的代码。我们希望这篇文章能够帮助您编写更好的测试用例，提高您的代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6716c129ad1e889fe21deb19