在前端开发过程中，用到的第三方库数量很多。然而，这些库并不一定都是完美无缺的，可能会有一些 Bug 或者缺少一些需要的功能。为了解决这问题，我们可以在测试阶段模拟一些数据和行为。而 npm 包 injectmock 就为我们提供了方便和快速的模拟数据的工具。
本篇文章将向大家介绍 npm 包 injectmock 的使用方法和一些实际的示例。希望能够帮到各位前端开发者。
安装
npm 包 injectmock 的命令行安装非常简单。你只需要执行下面的命令：
npm install injectmock --save-dev
使用方法
使用 injectmock 的方法很简单。你只需要在测试代码中引入该包，然后在测试代码中使用该包提供的 API 进行模拟。假设我们需要在测试代码中模拟一个 username is 'MoeJoe' 的用户登录成功，我们可以仿照如下代码：
-- -------------------- ---- ------- ------ ---------- ------------- ---- ------------- ------ ----------- ---- ------------------- ----- -------- - - --------- --------- --------- ------------ -- --------------------- ------------- -- -- --------------------------- -- -------------
上述代码中我们使用了 injectmock 提供的 mockData 函数通过传入的 userService 和 verifyUser 对服务进行 mock。在该函数的第三个参数中，我们传入了一个函数，该函数返回一个 Promise，该 Promise 的解析值为 mockUser，即我们期望在测试代码中该服务的 verifyUser 方法所返回的值是 mockUser。
如果你需要模拟一个异步函数，你可以仿照如下代码：
-- -------------------- ---- ------- ------ ---------- ------------- ---- ------------- ------ ----------- ---- ------------------- ----- -------- - - --------- --------- --------- ------------ -- ------------------------- ------------- -- -- --------------------------- -- -------------
在该代码中，我们使用了 injectmock 提供的 mockFunction 取代了 mockData 。因为在测试代码中，verifyUser 方法实际上是一个异步函数，我们此时需要返回一个 Promise。
如果你需要测试一个函数的变量值，在代码中你可以仿照如下方式：
import {mockData, mockVariable} from 'injectmock';
const mockHost = 'localhost';
mockVariable(serviceModule, 'HOST_NAME', mockHost);
// 此处进行测试代码的其他操作除此之外，injectmock 还提供了其他的 mock 语法，比如模拟模块导出、模拟对象。
例子
下面我们来看一个具体的例子，以便更好地理解 injectmock。
假设我们现在需要测试一个依赖于 DNS 模块的应用程序，当 DNS 模块发生严重错误时，该应用程序应该将日志写入磁盘。我们需要测试 DNS 错误时日志文件确实被写入磁盘的情况。
首先，在我们的应用程序代码中，我们有一个名为 logError 的函数，用于将错误的消息打印到日志文件中。
-- -------------------- ---- -------
----- --- - ---------------
-------- --------------- -
-- ----- ----- --- -- ----
------------------- -------------------
-
-------- -------------------- --------- -
--------------------- ----- -------- -- -
-- ----- -
--------------
-
------------- ---------
---
-
-------------- - -----------因为我们的应用程序是需要与路由器互相通信的设备的一部分，所以我们不得不设置一个回调函数，用于指示应用程序什么时候完成 DNS 查询。
现在，我们可以使用 injectmock 来测试 logError 方法是否正常调用。为了方便起见，我们将该方法单独放在一个叫 logger.js 的文件中。我们将在测试代码中导入该方法，并使用 mockData 来进行 mock。
-- -------------------- ---- -------
------ - -------- - ---- -------------
------ ------ ---- -----------
------------------ -- -- -
------------- -- -
---------------- ----------- -- -- -
----------------- --- ----- ----------
---
---
---------- ---- -------- ---- --- ------- -------- -- -- -
------------------- -------------- ---------
---
------------ -- -
-----------------------
---
---我们使用 Jest 来运行测试。在此示例中，我们首先使用 mockData 来 mock logError 方法，接着创建测试点，在测试点中将调用 logger.logError 方法，并且在 afterEach 部分还原所有 mock。
但是，需要注意的是，在测试点内，我们并不要求 logError 一定会被调用，我们只是想要确认它已经被 mock 了。为此，我们将模拟 logError 方法的整体的代码包裹在了 beforeEach 函数中，以确保每个测试都可以看到该 mock 函数。
总结
前端开发过程中，我们总是会遇到需要模拟数据的情况。通过使用 npm 包 injectmock，我们可以很方便的解决这个问题。该工具的 API 非常简单，使用起来也很方便。希望本篇文章能够为大家提供有用的帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67930