Redux 是一个常用于管理应用程序状态的库。在前端开发中，Redux 经常被用来维护应用程序的全局状态。然而，如何对 Redux 进行测试仍然是很多开发者面临的挑战之一。这时候，我们可以利用 redux-mock-store 这个库来帮助我们进行 Redux 测试。
redux-mock-store 简介
redux-mock-store 帮助你轻松地模拟 Redux store。因为 Redux store 是应用程序状态的唯一掌握者，因此模拟它至关重要，以验证组件是否正确地映射到状态。
使用 redux-mock-store 可以非常方便地创建一个 Redux store，该 store 还包含各种 Redux 的 API，例如 dispatch、getState 等等。
在 Mocha 测试中使用 redux-mock-store
下面，我们来看看如何在 Mocha 测试中使用 redux-mock-store。在本文中，我们将使用 TypeScript 进行示例代码的编写。假设我们有一个简单的 Redux store，如下所示：
import { createStore } from 'redux'
import rootReducer from './reducers'
export const store = createStore(rootReducer)我们的 rootReducer 如下所示：
-- -------------------- ---- ------- ------ - --------------- - ---- ------- ------ - ----------- - ---- --------------- ------ - ----------- - ---- --------------- ----- ----------- - ----------------- ----- ------------ ----- ------------ -- ------ ------- -----------
最后，我们的 userReducer 和 postReducer 如下所示：
-- -------------------- ---- -------
------ - --------- - ---- -------
------ --------- --------- -
----- ------
-
----- ------------- --------- - -
----- -------
-
------ ----- ----------- - ------ - ------------- ------- ---------- -- -
------ ------------- -
---- -----------
------ -
---------
----- ---------------
-
--------
------ -----
-
--- -------------------- ---- -------
------ - --------- - ---- -------
------ --------- --------- -
------ ------
-
----- ------------- --------- - -
------ ------ -------
-
------ ----- ----------- - ------ - ------------- ------- ---------- -- -
------ ------------- -
---- ------------
------ -
---------
------ ---------------
-
--------
------ -----
-
-我们要测试的是 SET_NAME 和 SET_TITLE 这两个 action。在 Mocha 测试中，我们可以这样编写测试代码：
-- -------------------- ---- -------
------ ------------------ ---- ------------------
------ ----- ---- -------------
------ - --------- - ---- -------
------ - ----- - ---- ----------
----- ----------- - -------
----- --------- - -------------------------------
--------------- ---- ----- ------ -- -- -
--- ------------------ --------- - - ----- ----------- -------- ----- -
--- --------------- --------- - - ----- ------------ -------- -------- ------ -
---------- --- ---- ---- ----------- -- -- -
----- --------------- - -------------------
----- --------- - -
----- -
----- -------
--
-
----- ----- - --------------------
---------------------------------
---------------------------------------------------
--
---------- --- ---- ----- ----------- -- -- -
----- --------------- - ----------------
----- --------- - -
----- -
------ ------ -------
--
-
----- ----- - --------------------
------------------------------
---------------------------------------------------
--
--通过上面的测试用例，我们可以很清晰地了解 redux-mock-store 的用法。
结论
在本文中，我们介绍了如何使用 redux-mock-store 进行 Redux 测试。我们展示了如何使用 mockStore 来模拟一个 Redux store，以及如何使用 dispatch action 来操作该 store。通过这种方式，可以更好地维护应用程序状态并改进代码质量。同时，这也证明了测试是成功的良好实践。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67079c04d91dce0dc86abdcb