在前端开发中，经常需要与后端进行数据交互。而 HTTP 请求是实现数据交互的一种常见方式。然而，在测试时，我们需要模拟 HTTP 请求的返回数据，以确保代码的正确性。本文将介绍 Jest 和 PollyJS 这两个工具，它们可以帮助我们在测试时处理 HTTP 请求。
Jest
Jest 是一个流行的 JavaScript 测试框架，它提供了很多功能，如测试运行、断言、覆盖率报告等。在 Jest 中，可以使用 fetch、axios 等库来发送 HTTP 请求。但是，这些库发送的请求是真实的，无法在测试中控制其返回数据。因此，我们需要使用 PollyJS。
PollyJS
PollyJS 是一个用于拦截、记录和重放 HTTP 请求的库。它可以模拟 HTTP 请求的返回数据，以便我们在测试中控制数据。使用 PollyJS 可以帮助我们测试网络请求时的各种情况，如超时、错误、缓存等。
安装和配置
首先，我们需要安装 PollyJS：
npm install @pollyjs/core @pollyjs/adapter-node-http --save-dev
然后，我们需要在 Jest 的配置文件中添加 PollyJS 的配置。在 jest.config.js 文件中添加以下代码：
module.exports = {
// ...
testEnvironment: 'node',
setupFilesAfterEnv: ['./setupPolly.js'],
// ...
};在 setupPolly.js 文件中，我们需要添加 PollyJS 的配置代码。以下是一个简单的示例：
-- -------------------- ---- -------
------ - ----- - ---- ----------------
------ --------------- ---- -----------------------------
--------------------------------
----- ----- - --- ------------------
------------ -- -
-------------------------------------- ----- ---------- -- -
----- ------- - ---------------------------
----------------------- - -------------------
---
------------------------------------- ----- ---------- -- -
----- ------- - ---------------------------
----------------------- - -------------------
---
--------------------------------------- ----- ---- -- -
----------------------------- --------------------
---
-------------------------------- ----- -- -
-------------------- --------------- -------------
---
---
----------- -- -
-------------
---在这个示例中，我们使用 NodeHttpAdapter 作为 PollyJS 的适配器。然后，我们定义了一些回调函数，用于在请求过程中处理请求和响应。在 beforePersist 回调函数中，我们设置了响应的 content-type 头部，以确保返回的数据是 JSON 格式。在 beforeReplay 回调函数中，我们也设置了相同的头部，以便在重放时正确处理数据。在 beforeResponse 回调函数中，我们设置了响应的 content-type 头部，以确保返回的数据是 JSON 格式。在 request 回调函数中，我们简单地打印了请求的方法和 URL。
使用 PollyJS
现在，我们已经完成了 PollyJS 的配置。接下来，我们可以在 Jest 中使用 PollyJS 来处理 HTTP 请求。以下是一个简单的示例：
-- -------------------- ---- -------
------ ----- ---- --------
-------------- ---- --------- -- -- -
---------- ------ ------ ----- -- -- -
----- - ---- - - ----- ----------------------------------------------------------
----------------------
------- --
--- --
------ ----- --- ------ -------- --------- --------- --------- ----- ---------------
----- ----- -- ------------------------------------------------------------------------------------------------------------
---
---
---在这个示例中，我们使用 axios 发送了一个 HTTP GET 请求，并断言返回的数据是否符合预期。然而，由于我们已经配置了 PollyJS，因此这个请求实际上是被 PollyJS 拦截并返回了模拟数据。在执行测试时，我们可以看到 PollyJS 打印的请求信息，以及断言是否通过。
总结
本文介绍了 Jest 和 PollyJS 这两个工具，它们可以帮助我们在测试时处理 HTTP 请求。使用 PollyJS 可以模拟 HTTP 请求的返回数据，以便我们在测试中控制数据。通过这些工具，我们可以更好地测试前端代码，提高代码质量和稳定性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65ffa2efd10417a222ad9c37