在前端开发中，使用 Redux 作为状态管理工具是非常常见的。但是在测试 Redux 状态时，我们需要一个 mock store 去替代真实的 store，以便隔离测试，保证业务逻辑的独立性。而 npm 包 @types/redux-mock-store 就是一个能够生成 mock store 的库。在本文中，我将会介绍如何使用 @types/redux-mock-store 进行测试。
安装
通过 npm 进行安装：
npm install --save-dev @types/redux-mock-store
使用
@types/redux-mock-store 提供了一个函数 configureStore，用于生成一个 store 的模拟器。以下是一个使用示例：
-- -------------------- ---- -------
------ - ------------ ---------------- --------------- - ---- --------
------ ----- ---- --------------
------ -------------- ---- -------------------
----- ----------- - --------
----- --------- - ----------------------------
----- ------------ - - ------ - --
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - --------- ------ ----------- - - --
---- ------------
------ - --------- ------ ----------- - - --
--------
------ ------
-
-
--------------------- -- -- -
---------- ------ --------- -------- -- -- -
----- ----- - ------------------------
---------------- ----- ----------- ---
----- ------- - -------------------
----- --------------- - - ----- ----------- --
-------------------------------------------
---
---首先，使用 configureStore 函数生成一个 mock store，并给定了 middleware 数组和 initialState。接着，这个 mock store 就可以像普通的 store 一样进行 dispatch 操作。在上述例子中，我们执行了一个 INCREMENT 操作，然后使用 store.getActions() 得到了 mock store 所接收到的 action。最后，我们使用 Jest 提供的断言函数 toEqual() 比较了 action 的实际值和预期值是否相等。如果不相等就会抛出 AssertionError。
配合 Jest 进行测试
@types/redux-mock-store 库是专门为 Jest 所设计的，使用 Jest 的mock方式深度测试 Redux 的业务逻辑是最佳实践。
在 Jest 中，可以通过 jest.fn() 函数生成一个 mock 函数，这个 mock 函数可以接收方法或组件的调用，并根据调用参数返回预定义结果。具体示例：
-- -------------------- ---- -------
------ - ----------- - ---- --------
------ - -------- - ---- --------------
------ - ------- --------- - ---- -------------------------
------ -------------- ---- -------------------
------ ------- ---- ------------
----- --------- - -------------------
------------------- -- -- -
---------- -------- -- -- -
----- ----- - ----------- -------- - ---
----- - --------- - - -------
--------- --------------
-------- --
-----------
--
------------------------- -------------------------------
---
---------- --------- ---- --------- -- -- -
----- ----- - ----------- -------- - ---
----- - --------- - - -------
--------- --------------
-------- --
-----------
--
-----------------------------------------
----- ------- - -------------------
-------------------------- ----- ----------- ----
---
---在上述示例中，我们使用了一个 Counter 组件作为被测试的对象。这个组件通过 Redux 管理一个 counter 状态，并以此来改变组件的视图。我们首先生成了一个 mock store，使用这个 store 来代替真正的 store。接着，我们使用 render() 函数渲染了这个 Counter 组件，并使用了 getByText() 函数得到了“Current count: 0”这个文本节点。最后，我们使用了 Jest 的断言函数 toBeInTheDocument() 来验证其是否存在。
在第二个测试用例中，我们模拟了点击按钮“Increment”的操作，并使用 store.getActions() 得到了 mocked store 实际接收到的 action 对象。最后使用了 toEqual() 函数验证了 action 对象的实际值和预期值是否相等。
总结
@types/redux-mock-store 是一个非常好用的库，利用它我们可以方便地测试 Redux 的业务逻辑。本文主要介绍了其安装和使用，并给出了相关示例代码。希望大家可以在实际开发中掌握这个库的使用，让业务更加健壮。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaaf6b5cbfe1ea06105ff