如何模拟一个XMLHttpRequest请求用于单元测试——nise源码阅读与分析

概述

在我们进行单元测试的过程中，如果我们需要对一些HTTP接口进行相关的业务测试，那么我们就需要来模拟HTTP请求的发送与响应，否则我们就无法完成测试的闭环。

目前，有许许多多的测试框架都提供了模拟HTTP请求相关的一些流程功能，我们在这边文章中将会讲到的，就是我们在上一篇关于单元测试的博客提高代码质量——使用Jest和Sinon给已有的代码添加单元测试中提到的Sinon中引用的HTTP模拟框架nise。

本文的目标是让读者能够通过这篇文章，知道一个成熟的测试框架是如何来模拟一个HTTP的实现，并且与业务代码进行结合，辅助进行测试。本文内容相对较为简单，基本没有难度，作为一个知识面扩充建议读者快速略读。

通过本文，你可以了解以下内容：

• nise是什么？
• nise的设计思路是怎么样？
• nise是如何与业务代码结合，辅助测试？

nise是什么

fake XHR and Server.

nise在Github上面的介绍很简单，虽然只有四个单词，但是却很精确的说明了这个库的含义——构造一个模拟的XHR和Server对象，用来替换原生的对象用来满足测试需求。

它是Sinon.js的一部分，用来处理HTTP相关测试问题。

该库提供了替换原生的XHR对象和Server相关的接口，但是我们在本文中只介绍关于XHR部分，也就是浏览器中的XHR对象的替换。该部分位于仓库中/lib/fake-xhr/index.js中，下文中提到的nise如果没有特别注明，均表示nise中的XHR。

nise的设计思路是怎么样的

nise的API接口与使用方法

想要了解nise的设计思路，我们就需要先看下nise的使用方法。

目前，nise提供了以下三个API接口：

module.exports = {
    xhr: sinonXhr, // 用来存储原来的XHR对象和一些环境判断属性
    FakeXMLHttpRequest: FakeXMLHttpRequest, // XHR对象构造函数
    useFakeXMLHttpRequest: useFakeXMLHttpRequest //调用后，使用fake XHR对象替换全局，并返回一个带有restore方法的fake XHR对象构造函数
};

我们在使用时，只需调用userFakeXMLHttpRequest方法，即可将原生的XHR对象替换成nise提供的XHR对象。在测试完成后，我们再调用返回的restore方法，这样我们就恢复了原生的XHR对象。

返回的模拟HXR对象还有部分API接口可以调用，这部分我们将在下一节——nise结构中进行介绍。

nise结构

构造函数——FakeXmlHttpRequest

// 构造函数，用来存储请求相关的数据如请求状态、请求头等
function FakeXMLHttpRequest(config) {
    EventTargetHandler.call(this);
    this.readyState = FakeXMLHttpRequest.UNSENT; // 原生属性，用来标识请求状态
    this.requestHeaders = {}; // 记录请求headers属性
    this.requestBody = null; // 记录请求body属性
    this.status = 0;
    this.statusText = "";
    this.upload = new EventTargetHandler(); // 上传事件属性
    this.responseType = ""; // 响应类型属性
    this.response = ""; // 响应内容属性
    this.logError = configureLogError(config);

    if (sinonXhr.supportsTimeout) {
        this.timeout = 0;
    }

    if (sinonXhr.supportsCORS) {
        this.withCredentials = false;
    }

    if (typeof FakeXMLHttpRequest.onCreate === "function") {
        FakeXMLHttpRequest.onCreate(this);
    }
}

FakeXMLHttpRequest.useFilters = false;

FakeXMLHttpRequest.addFilter = function addFilter(fn) {} // 增加过滤函数

FakeXMLHttpRequest.defake = function defake(fakeXhr, xhrArgs) {} // 将常用事件如open、send等XHR的方法绑定到模拟的XHR对象上

FakeXMLHttpRequest.parseXML = function parseXML(text) {} // 解析XML

extend(FakeXMLHttpRequest.prototype, sinonEvent.EventTarget, {
    open: function open(method, url, async, username, password) {} // XHR原生方法模拟
    
    readyStateChange: function readyStateChange(state) {} // XHR原生方法模拟
    
    setRequestHeader: function setRequestHeader(header, value) {} // 设置请求header并保存到requestHeaders属性中
    
    setStatus: function setStatus(status) {} // 设置status并保存到status属性中
    
    setResponseHeaders: function setResponseHeaders(headers) {} // 设置响应headers并跟随callback一起返回
    
    send: function send(data) {} // XHR原生方法模拟
    
    abort: function abort() {} // 终止HTTP请求
    
    error: function () {} // XHR原生方法模拟
    
    triggerTimeout: function triggerTimeout() {} // 触发超时
    
    getResponseHeader: function getResponseHeader(header) {} // 获取响应header
    
    getAllResponseHeaders: function getAllResponseHeaders() {} // 获取全部的响应headers
    
    setResponseBody: function setResponseBody(body) {} // 设置响应内容
    
    respond: function respond(status, headers, body) {} // 触发请求的callback函数
    
    uploadProgress: function uploadProgress(progressEventRaw) {} // 上传进度触发事件
    
    downloadProgress: function downloadProgress(progressEventRaw) {} // 下载进度触发事件
    
    uploadError: function uploadError(error) {} // 上传失败触发事件
    
    overrideMimeType: function overrideMimeType(type) {} // 覆盖mineType
});

nise是如何与业务代码结合，辅助测试

通过上面的源码介绍我们可以知道：nise是通过完全模拟一个模拟的XHR对象，然后再使用这个模拟的XHR对象来替换全局的XHR对象。

而我们在进行HTTP相关测试时，参数是由我们传入的，因此不需要进行验证。所以我们最终需要验证的其实是callback中的处理逻辑和结果。因此，我们可以通过以下一个示例来看下它如何与业务代码进行结合。这个示例是在上一篇博客中出现过的示例：

test('user', () => {
    let callback = jest.fn();

    HTTPCommon.deleteRemoteSession({
        data: {},
        success: callback
    });

    expect(requests.length).toBe(1);

    requests[0].respond(200, {"Content-Type": 'application/json'}, 'hjava'); // 模拟返回值

    expect(callback.mock.calls[0][0]).toBe('hjava');
});

通过respond这个方法，fakeXMLHttpRequest对象触发了callback函数，并且将指定数据传递到业务代码中。因此，我们能够通过callback相关的业务逻辑来判断我们的逻辑是否正常。

总结

nise通过一个非常常规的方法——模拟一个XHR对象并且实现XHR对象的所有功能来完成针对HTTP请求进行记录的功能。我们再通过nise记录的数据，组合其他的单元测试框架来对业务代码进行测试。

nise的源码只有600余行，而且非常简单易懂。我将原有代码folk一份并加上了部分注释，有兴趣的同学可以看看，具体地址见此处。

附录

• Sinon.js
• nise
• 我folk的nise