在前端开发中，设计一个可靠的服务端与客户端之间的交互绝对是很重要的一件事情。Redux 是一个非常著名的 JavaScript 应用程序状态容器，并且 Redux 模式中遵循的单向数据流理念也让前端开发变得更加智能和高效。但是如何对这中状态容器进行单元测试呢？这就是使用 redux-mock-provider npm 包的作用了。
本篇文章将会介绍如何使用 redux-mock-provider 建立你的 redux 单元测试。
什么是 Redux-Mock-Provider？
redux-mock-provider 是一个拓展了 redux-mock-store 的 npm 包，提供了一个为 Redux 应用程序生成服务的 Mock 提供者，并且能够帮助开发者在测试过程中提供替代的服务和依赖项。
怎样使用 Redux-Mock-Provider？
在你的项目中，首先需要通过 npm 安装 redux-mock-provider：
npm install redux-mock-provider --save-dev
接着在你的单元测试文件中使用它：
-- -------------------- ---- -------
------ - ----------- - ---- --------
------ - ------------ - ---- ----------------------
------------ ----------- -- -- -
----- ------------ - - -- ------
---- - ----- --------------------- --
---- --- ---
-
----- ------------ - --- --------------- -- -- ---------
----- ----- - ------------
------ - ------------- ------- -- -
------------------- -
--------
------ ------
-
-
--
-------------- -- -- - -- ------
----- ------------ - -
---- - ----- --------------------- --
---- --- ---
--
----- ----- - -----------------
------------------------------------ -- --------
---
---在这个示例中，我们创建了一个 MockProvider 实例，并且在测试文件之前使用 beforeEach 设置初始状态。可以看到，我们还使用了 store.getState() 来检查 redux store 中的状态是否与我们期望的相等。这就是如何检查 redux 中的状态。
如何进行进一步的测试
可以使用 MockProvider 定义服务、依赖和依赖项中的 Mock 对象，这可以大大简化测试流程。
在下面的示例中，我们将定义一个 Mock Object，并在 reducer 中生成一个要获取的数据，最后验证状态是否正确。
-- -------------------- ---- -------
------ - ----------- - ---- --------
------ - ------------ - ---- ----------------------
------------ --------- ---- ---- -------- -- -- -
----- ------------ - - -- ------
---- - ----- --------------------- --
---- --- ---
-
----- ---------- - - -- -- ---- ------
-------- -----
----- -- ----- ----- ---------- --
-
----- ------------ - --- -------------- -- -- ---------
------------------- ------ -- -- ----------------------------- -- -- ---- -------
----- ----- - ------------
------ - ------------- ------- -- -
------------------- -
---- -------------
------ - --------- ----- --------------- --
--------
------ ------
-
-
--
-------------- ------- -- - -- ----------
----- ---------------- ----- ------------ ---
----- ----- - -----------------
-------------------------------------------- -- --------
---
---在这个示例中，我们首先定义了一个自定义数据对象 customData，然后在 MockProvider 中使用 addService 方法注册了我们要 Mock 的服务。在测试用例中使用 dispatch 发送 "FETCH_DATA" 的 Action，这会触发对会对注册的 get 方法 Mock。最后，我们验证接收到的数据是否正确，并检查是否将其添加到我们的应用程序状态中。
总的来说，在前端开发中使用和了解单元测试是必不可少的。redux-mock-provider 能够让你更好地控制你的单元测试过程，它已经成为了一个不可或缺的 npm 包。我们希望上述代码能指导你如何使用 redux-mock-provider。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8b69