在 Web 前端测试中，常常会需要测试 AJAX 行为。 为了简化测试的环境要求需要提供虚拟的测试环境。 Sinonjs 在这方面提供了两类 API：

  • Fake XMLHttpRequest：覆盖 DOM API 中的 XHR。使得我们可以捕获所有用户构建的 XHR 对象，包括直接构造的 XMLHttpRequest，也包括通过 jQuery 等工具构造的。因此可以测试 XHR 构造是否正确。
  • Fake Server：Mock 服务器行为。如果我们只希望 Mock 服务器的 Response，可以使用 Fake Server。

Fake XMLHttpRequest

sinon.useFakeXMLHttpRequest() API 用于创建一个 Fake 对象， 使用该对象可捕获所有新构造的 XMLHttpRequest（或 ActiveXObject）实例。

Fake/Restore

通常在测试开始时进行 fake，测试结束后恢复相关的 DOM 对象：

describe('xhr', function(){
    var xhr, fake;
    before(function(){
        fake = sinon.useFakeXMLHttpRequest();
        fake.onCreate = function(_xhr){ xhr = _xhr; };
    });
    after(function(){
        fake.restore();
    });
});

上述代码基于 Mocha 测试框架，参考：利用 Mocha 进行 BDD 风格测试。

测试 XHR 对象

然后在 useFake 后调用 $.get()，jQuery 会生成一个 XHR 对象， 该对象会被 fake.onCreate() 回调捕捉捕捉到并赋值给 xhr。

下面对该 XHR 对象进行测试：

it('should GET url: https://harttle.land', function() {
    var $.get('https://harttle.land');
    expect(xhr.url).to.equal('https://harttle.land');
    expect(xhr.method).to.equal('GET');
});

Fake Response

useFakeXMLHttpRequest 允许对每个 xhr 给出 HTTP 响应，即 useFakeXMLHttpRequest 包含了 useFakeServer 的功能。

$.get('https://harttle.land');
xhr.respond(200, { 'Content-Type': 'text/plain' }, 'okay');
expect(xhr.responseText).to.equal('okay');

虽然 DOM XHR 是异步的，但 Fake XHR 是同步的

Fake Server

sinon.fakeServer() 的功能是 sinon.useFakeXMLHttpRequest 功能的一部分。 但提供了更加方便的 Request/Response 映射。 如果我们只是希望 Mock 服务器行为而不关心 XHR 对象本身，可以使用 useFakeServer() API：

Fake/Restore

同样地，首先进行 Fake 和恢复：

describe('server', function(){
    before(function() {
        server = sinon.fakeServer.create();
        server.respondWith('GET', 'https://harttle.land', 
            [200, {'Content-Type': 'text/plain'}, 'harttleland']);
    });
    after(function() {
        server.restore();
    });
});

测试 AJAX

然后开始测试 AJAX 行为，注意异步方法需要返回 Promise，让 Mocha 等待该异步过程结束。

it('should respond with 200 harttleland', function() {
    reuturn $.get('https://harttle.land')
        .then(function(result){
            expect(result).to.equal('harttleland');
        });
});

引入 chai-as-promised 可以简化上述断言，例如：

expect($.get('https://harttle.land')).to.eventually.equal('harttleland');

详情请参考：Mocha 下测试异步代码

本文采用 知识共享署名 4.0 国际许可协议（CC-BY 4.0）进行许可，转载注明来源即可： https://harttle.land/2016/08/15/sinon-xhr.html。如有疏漏、谬误、侵权请通过评论或 邮件 指出。