导言
近年来，前端技术得到了飞速的发展和普及，前端工程师不仅要熟练掌握 HTML、CSS、JavaScript 等基础知识，还需要懂得一些后台相关的知识。而在开发的过程中，我们需要调用后台 API，这时候就需要用到一个网络请求库。对于 JavaScript 而言，其中一个著名的网络请求库就是 axios。而对于 axios 的测试工具之一就是 httpception，本文将会介绍 httpception 的一些使用方法，以供大家参考。
httpception 的介绍
Httpception 是一个基于 Node.js 平台的库，用于模拟和捕捉 HTTP 请求。Httpception 提供了类 axios 的 API，可以模拟和捕获 axios 发出的 HTTP 请求，并对响应进行模拟。Httpception 可以与 jest 或 mocha 等测试框架集成使用，方便我们在单元测试过程中用于断言单元测试中某个请求已被执行，并确定该请求的请求参数、响应状态等信息。
安装 httpception
安装有 npm 的 Node.js 环境后，我们可以运行以下命令来安装 httpception：
npm install --save-dev httpception
安装完成后，我们需要在测试文件中引入 httpception：
const httpception = require('httpception');使用 httpception
httpception 主要有以下三个 API，分别是 httpception.intercept、httpception.verify 以及 httpception.reset。
httpception.intercept
该 API 被用来截获 HTTP 请求。我们可以在调用 axios 发出一个请求时，同时调用 httpception.intercept 截获这个请求并指定响应（根据开发从而决定要不要真正的发出这个请求），然后测试这个请求在程序中是否被正确的处理了。
以下是一个 intercept 的示例：
-- -------------------- ---- -------
------------ --------- ---- --------- ----- -- -- -
---------------------------- ------------------------------ -
------- ----
-------- - --------------- ------------------ --
----- ----------------- --- -- ----- ------- ---
---
----- ------ - ----- -----------------
------------------------- --- -- ----- ------- ----
---以上代码中，我们在发出 http://localhost:3000/books 的请求时，同时拦截并返回指定的响应。我们可以在被测试的 myApi.getBooks() 函数中调用了 axios.get('http://localhost:3000/books')，而这个请求最终就被我们自定义的响应截获了。
httpception.verify
该 API 被用来验证和断言是否有指定的请求（及其请求参数和请求 headers）被发出了。我们可以在 http 请求完成后通过调用 httpception.verify 来确保测试中我们期望的请求是否被执行，并通过一些 assertions 验证这些请求信息是否与我们期望中一致。
以下是一个 verify 的示例：
test('should verify http request', async () => {
const resultPromise = myApi.addBook({ name: 'bookA' });
await expect(resultPromise).resolves.toEqual({ id: 1, name: 'bookA' });
httpception.verify('POST', 'http://localhost:3000/books', {
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: 'bookA' })
});
});在以上代码中，我们调用了 myApi.addBook({ name: 'bookA' })，在函数内部通过 axios.post('http://localhost:3000/books', { name: 'bookA' }) 发送了 http 请求，最终在 httpception.verify 中通过断言来确保我们的期望和实际结果一致。
httpception.reset
该 API 被用来重置对 intercept 以及 verify 的拦截器和验证器的状态，一般在每个测试之间调用，以确保不同的测试互不影响。
以下是一个 reset 的示例：
-- -------------------- ---- ------- ------------- -- - -------------------- --- ------------ ------ ---- ------- ---- ----- -- -- - ----- ------------- - ----------------- ----- ----------------------------------------- --- -- ----- ------- ---- ------------------------- ------------------------------- ---
在以上代码中，我们通过 beforeEach 方法在执行具体测试前调用 httpception.reset 将 httpception 的状态重置，保证了我们在执行 test('should verify http request v2') 的时候不会受到上一个测试的影响。具体实现还需要我们结合其他测试组件和测试框架来做调整。
总结
本文介绍了一些关于 httpception 的使用方法，我们可以在测试过程中，用这个库来捕捉和验证一些 axios 库所发出的 http 请求，从而方便我们的单元测试工作，省去需要每次都连上互联网的时间，如此以来，提升我们工作的效率，让测试变得更加简单、可靠。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/78374