前言
在前端开发中，我们需要测试我们的代码是否正常工作。而一般而言，我们在测试的时候需要 Mock 掉数据请求等接口。有些前端开发者为了避免在测试时对真实的接口造成影响，使用常数或者本地 JSON 数据进行 Mock，但是这样的缺点是不能够完全模拟真实情况，比如一些动态生成的数据和流程，这时候我们需要使用一些 Mock 工具来解决这个问题。而 npm 包 bouchon-samples 就是这样一个 Mock 工具。
什么是 bouchon-samples？
bouchon-samples 是基于 Node.js 的一个 Mock 数据、响应和重放工具。它能够用来测试许多种 Web 应用程序，包括前端应用程序和 API，它可以创建一个可以测试静态数据和 JSON 文件的 Mock 服务器，并能够在测试完成后，将整个交互序列录制下来，然后进行回放以便于测试结果。
换句话说，其实 bouchon-samples 就是一个可以模拟出真实 API 并且能够对真实 API 进行可马上重放测试的 Mock 工具。
安装 bouchon-samples
安装 bouchon-samples 可以使用 npm 进行安装：
--- ------- -- ---------------
这样，你就可以通过输入以下命令来验证是否安装成功了：
--------------- ---------
如何使用 bouchon-samples 进行 Mock
在安装成功后，我们就可以通过 bouchon-samples 创建 Mock 服务器了。以下是一个简单的创建 Mock 服务器的示例：
----- ------- - -------------------------- ----- ------ - --- --------- ------- ------- -- -------------------- -- -- - ------ ----------------- --------- ------- ------ ------------------ -- -- --------------------- ----- -- - ----- - --------- ----- - - -------- ------ ----------------- -------- ----- ----- - --------- ----- - -- -- ------------------- -- -- - -------------------- ------ -- ---- --
上述代码中，我们首先引入了 bouchon-samples 模块，然后创建了一个 Bouchon 服务器，指定了路由前缀，然后通过 .get() 和 .post() 方法分别定义了 GET 和 POST 请求的处理函数。这两个方法都接受两个参数：路由路径和处理函数。在这个例子中，我们使用了箭头函数并且通过将处理函数中返回的值包装为 Promise，来让服务器返回异步响应，以便于尽量确保所有异步请求都得到正确的处理。
在这个例子中，我们定义了两个用户请求，分别是获取所有用户和添加用户。在获取用户列表时，我们返回了一个用户对象，而在添加用户时，我们从请求体中获取了用户名和电子邮件，并将这些信息添加到了响应数据中，最后返回一个带有成功接口和新增的用户信息的响应对象。
有了这个 Mock 服务器，我们就可以像调用任何实际的 API 一样来调用它的用户请求，例如，获取用户列表：
---- --------------------------------
输出结果为：
- --------- ------- ------ ------------------ -
或是添加用户：
---- -- ---- -- ------------ - -------- ------- - --------------------- --------------------------------
输出结果为：
------------------------------------------------------------------------
可以发现输出结果和我们在 Mock 服务器的处理函数中定义的相同，说明我们通过 bouchon-samples 成功地创建了一个 Mock 服务器。
录制和回放
在创建好 Mock 服务器并进行一些测试后，我们会想知道这些测试的调用序列以及他们的响应。这个时候，我们可以使用 bouchon-samples 自带的 recorder 模块进行集成录制。
在 Mock 服务器代码中，我们可以加入以下几行代码来集成 recorder：
----- ------- - -------------------------- ----- ------ - --- --------- ------- ------- -- ----- -------- - ---------------------------------------- -------------------- -- -- - ------ ----------------- --------- ------- ------ ------------------ -- -- --------------------- ----- -- - ----- - --------- ----- - - -------- ------ ----------------- -------- ----- ----- - --------- ----- - -- -- ------------------- -- -- - -------------------- ------ -- ---- --
这里我们加入了一个名为 recorder 的变量，并将其设置为 server.recorder()，同时，指定了录制文件的存放位置。在这个服务器上执行的所有请求都将被录制，并以数组的形式存储在指定的文件中。
接下来我们可以通过回放器来测试我们的响应是否正确。而 bouchon-samples 也自带了一个回放器：
----- ------- - -------------------------- ----- ------ - --- ----------------------------------------- -------------------- ------- ---------------------------------------------------
回放器的 play 方法接受三个参数：
- urlPath ：要调用的模拟 URL 的路径
- method ：HTTP 方法
- requestBody ：可选的请求正文对象
这个调用返回一个 promise，可以使用它来读取回放响应。例如，这是我们使用回放器处理第一个测试的方法：
-------------------------- ---------------------------------------------
输出结果为：
- --------- ------- ------ ------------------ -
这个方法首先调用 play() 方法，提供预期的路由和方法，并等待回放器返回响应。因为我们在录制期间使用的是 Promise，请确保将这些 Promise 与 Promise.all () 或使用 async / await 包装，以便您能够同时使用它们。
总结起来，使用 bouchon-samples 这个 Mock 工具可以帮助我们更好的进行测试和开发。我们可以通过创建 Mock 服务器来模拟 API 接口，并通过录制回放器来验证我们在实现阶段所期望的所有交互和响应。希望这篇文章对大家有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066c83ccdc64669dde4e10