在 React 应用程序中，Redux 是一个非常有用的状态管理工具。它使得组件的状态管理变得更加容易，并帮助实现了应用程序的可预测性。但是在进行单元测试时，需要 mock Redux store 以确保测试用例的正确性。在这篇文章中，我们将详细介绍如何使用 Jest 进行 React 测试时进行 Redux store 的 mock 。
理解 Jest 和 Redux-mock-store
在开始之前，我们需要了解几个概念。首先是 Jest，它是 Facebook 开源的一个 JavaScript 测试框架，适用于测试 React 应用程序和其他 JavaScript 库。其次是 Redux-mock-store，它是一个库，用于模拟 Redux store。它允许我们模拟 store 中的各种操作并快速模拟组件的状态并进行单元测试。
使用 Jest 和 Redux-mock-store 进行测试
现在我们介绍如何使用 Jest 和 Redux-mock-store 进行测试。首先，让我们看一个简单的例子，其中创建了一个 Redux store，并将其作为 props 传递给一个组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------
------ - ------- - ---- --------------
----- ------------- - -- ----- ---------- -- -- -
-----
------- ----- ----------- ----
------- ----------- -- ------------ ----- ------ ---------- -------------
------
--
----------------------- - -
----- ----------------------------
----------- --------------------------
--
----- --------------- - ----- -- --
----- -----------
---
----- ------------------ - -------- -- --
----------- ---- -- ---------- ----- -------------- -------- ---- ---
---
------ ------- ------------------------ -----------------------------------在上面的代码中，我们通过 connect 函数将组件包装到 Redux store 中。看一下如何通过测试传递 store props 的方式来测试该组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- --------------
------ - ----- - ---- ---------
------ -------------- ---- -------------------
------ ------------- ---- ------------------
----- --------- - -----------------
------------------------- -- -- -
--- ------
----- ------------ - -
----- -
----- -------
--
--
------------- -- -
----- - ------------------------
---
---------- ------ ---- ------ -- -- -
----- ------- - ------
--------- --------------
-------------- --
-----------
--
-----------------------------------------
---
---------- ------ ---- ---- -- ------ ------- -- -- -
----- ------- - ------
--------- --------------
-------------- --
-----------
--
-----------------------------------------
----- ------- - -------------------
-------------------------- ----- -------------- -------- - ----- ------ - ----
---
---在上面的代码中，我们使用 Jest 进行单元测试。我们通过 configStore 方法创建一个模拟 store，并将其传递给我们的组件。我们可以在测试用例中模拟任何输入或动作来测试我们的组件。在第二个测试用例中，我们模拟点击“更改名称”按钮，并断言 dispatch 调用了一个正确的 action。
总结
在 React 应用程序中，Redux 是非常流行的状态管理工具。在进行单元测试时，需要模拟 Redux store 以确保应用程序的可预测性和正确性。在本文中，我们介绍了如何使用 Jest 和 Redux-mock-store 进行测试。通过使用这种方法，我们可以有效地测试 Redux 状态管理的 React 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/664d763cd3423812e4d07447