在前端开发中，我们经常需要测试异步请求的功能，例如 AJAX 请求和 Promise。但是在测试过程中，我们不希望真正地发送请求到服务器，因为这会使测试变得缓慢和不可靠。这时，我们可以使用 Sinon.js 来模拟这些异步请求，以便更好地进行测试。
Sinon.js 简介
Sinon.js 是一个用于 JavaScript 的测试框架，它提供了各种工具来模拟函数、对象和网络请求等。它支持所有主流的测试框架，例如 Mocha、Jasmine、QUnit 等。
Sinon.js 提供了三种主要的工具来模拟网络请求：
- Sinon.FakeXMLHttpRequest：用于模拟 AJAX 请求。
- Sinon.useFakeTimers：用于模拟定时器。
- Sinon.fakeServer：用于模拟 HTTP 服务器和客户端。
在本文中，我们将主要介绍如何使用 Sinon.FakeXMLHttpRequest 来模拟异步请求的测试。
使用 Sinon.FakeXMLHttpRequest
在测试异步请求时，我们通常需要模拟以下几个步骤：
- 发送请求。
- 接收响应。
- 处理响应数据。
Sinon.FakeXMLHttpRequest 可以模拟这些步骤，以便我们可以在不发送真正请求的情况下进行测试。
发送请求
首先，我们需要创建一个 Sinon.FakeXMLHttpRequest 对象来模拟 AJAX 请求。我们可以使用以下代码创建：
const xhr = sinon.useFakeXMLHttpRequest();
这将创建一个全局的 Sinon.FakeXMLHttpRequest 对象，以便我们在测试中使用。
接下来，我们需要设置一些请求参数，例如请求 URL、请求方法和请求头等。我们可以使用以下代码设置：
xhr.onCreate = function (request) {
request.method = 'GET';
request.url = '/api/data';
request.headers = { 'Content-Type': 'application/json' };
};这将设置创建的每个请求的参数。在这个例子中，我们将发送一个 GET 请求到 /api/data，并设置请求头为 application/json。
接收响应
接下来，我们需要模拟服务器响应。我们可以使用以下代码来模拟响应：
const response = '{"data": "hello world"}';
xhr.respond(200, { 'Content-Type': 'application/json' }, response);这将模拟一个成功响应，状态码为 200，响应头为 application/json，响应体为 '{"data": "hello world"}'。
处理响应数据
最后，我们需要处理响应数据。我们可以使用以下代码来处理响应：
xhr.onLoad = function () {
const responseText = xhr.responseText;
const responseData = JSON.parse(responseText);
console.log(responseData.data); // 输出 "hello world"
};这将在响应成功时处理响应数据。在这个例子中，我们将获取响应体的文本，然后将其解析为 JSON 格式，最后输出 data 属性的值。
完整示例
下面是一个完整的示例，它演示了如何使用 Sinon.js 来模拟异步请求的测试：
-- -------------------- ---- -------
-------------- ------ -------- -- -
--- ----
------------------- -- -
--- - ------------------------------
------------ - -------- --------- -
-------------- - ------
----------- - ------------
--------------- - - --------------- ------------------ --
--
---
------------------ -- -
--------------
---
---------- --- ------ -------- -- -
----- -------- - --------- ------ ---------
---------------- - --------------- ------------------ -- ----------
---------- - -------- -- -
----- ------------ - -----------------
----- ------------ - -------------------------
----------------------------------------- --------
--
----- ---------- - --- -----------------
---------------------- -------------
------------------
---
---在这个示例中，我们使用 Mocha 测试框架和 Chai 断言库来进行测试。我们首先创建一个 FakeXMLHttpRequest 对象，并设置请求参数。然后，我们模拟服务器响应，并处理响应数据。最后，我们创建一个真正的 XMLHttpRequest 对象，并发送请求。在 onLoad 回调函数中，我们对响应数据进行断言。
总结
使用 Sinon.js 可以方便地模拟异步请求的测试，以便更好地进行单元测试和集成测试。我们可以使用 Sinon.FakeXMLHttpRequest 来模拟 AJAX 请求，以便我们可以在不发送真正请求的情况下进行测试。通过模拟请求、响应和数据处理，我们可以更好地测试异步请求的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/662cc320d3423812e4a60ce1