在前端开发中，我们通常需要进行各种各样的测试，其中包括对 API 接口的测试。然而，在测试中，我们不希望真的去发送请求，因为这会造成很多不必要的麻烦。这时，我们就需要使用 mock 来模拟请求。
Jest 是一个非常流行的测试框架，它提供了一些强大的功能，其中就包括 mock。在 Jest 中，我们可以轻松地 mock 一个 XHR 请求，下面就来详细介绍一下如何实现。
XHR 请求的基本流程
在开始介绍如何 mock XHR 请求之前，我们先来看一下 XHR 请求的基本流程。XHR 请求可以分为以下几个步骤：
- 创建 XMLHttpRequest 对象
- 配置请求参数
- 发送请求
- 监听请求状态
- 处理响应数据
在实际开发中，我们通常会使用一些第三方库来封装 XHR 请求，比如 axios、fetch 等。这些库会隐藏掉一些细节，使得我们可以更加方便地进行请求操作。
Jest 中的 mock
在 Jest 中，我们可以使用 jest.mock() 方法来 mock 一个模块。这个方法接受两个参数，第一个参数是要 mock 的模块的路径，第二个参数是一个可选的模拟实现。
当我们使用 jest.mock() 方法来 mock 一个模块时，Jest 会自动将被 mock 的模块替换成模拟实现。这样，我们就可以在测试中使用模拟实现来代替真实的模块，从而避免真实模块的副作用。
如何 mock XHR 请求
在 Jest 中，我们可以使用 jest.spyOn() 方法来 mock XHR 请求。这个方法接受两个参数，第一个参数是要 mock 的对象，第二个参数是要 mock 的方法名。
在 mock XHR 请求时，我们需要 mock XMLHttpRequest 对象的 open() 和 send() 方法，以及 onreadystatechange 事件。具体实现如下：
// javascriptcn.com 代码示例
test('mock XHR request', () => {
const xhrMock = {
open: jest.fn(),
send: jest.fn(),
readyState: 4,
status: 200,
responseText: 'mock response',
onreadystatechange: function() {
if (this.readyState === 4) {
this.onreadystatechange();
}
}
};
const xhrSpy = jest.spyOn(window, 'XMLHttpRequest').mockImplementation(() => xhrMock);
// 发送 XHR 请求
const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data');
xhr.send();
// 断言 XHR 请求已发送
expect(xhrSpy).toHaveBeenCalled();
expect(xhrMock.open).toHaveBeenCalledWith('GET', '/api/data');
expect(xhrMock.send).toHaveBeenCalled();
// 断言 XHR 请求结果
expect(xhr.readyState).toBe(4);
expect(xhr.status).toBe(200);
expect(xhr.responseText).toBe('mock response');
});在上面的示例代码中，我们首先创建了一个 XHR mock 对象，这个对象包含了 open()、send() 和 onreadystatechange 方法。然后，我们使用 jest.spyOn() 方法对 window.XMLHttpRequest 进行了 mock，将其替换成了我们创建的 XHR mock 对象。
最后，我们使用 XMLHttpRequest 对象发送了一个 GET 请求，并断言了请求已发送，请求的参数正确，请求结果也符合预期。
总结
在 Jest 测试中，mock XHR 请求是非常常见的操作。通过使用 jest.spyOn() 方法，我们可以轻松地 mock XHR 请求。在实际开发中，我们可以根据需要，使用不同的模拟实现来模拟不同的请求场景，从而保证测试的完整性和准确性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6566b1a4d2f5e1655dfae189