在节点环境中对jQuery.ajax进行存根(jQuery 2.x)

Question

我正在尝试运行一些需要存根的测试jQuery.ajax.我正在使用SinonJS来做到这一点,它曾经与旧版本的jQuery(1.x)一起使用

var $ = require('jquery');
var sinon = require("sinon");
sinon.stub($, "ajax"); // this worked because $.ajax is defined

但是,在升级到jQuery 2.x之后,当我需要从我的模块运行jquery时,我不得不包含一个窗口环境.我jsdom用来完成这个:

var document = require('jsdom').jsdom(),
    window  = document.parentWindow,
    $       = require('jquery')(window);

问题 $.ajax现在未定义.我怀疑因为现在它返回绑定到特定元素但不完全确定的jQuery对象.有谁知道为什么以及如何解决这个问题？

编辑我的朋友谁没有在SO上指出,如果我们附加window到全局,我们可以得到普通的jquery对象而不是工厂

    global.window = require('jsdom').jsdom().parentWindow;
    var $ = require('jquery'); // this works as $.ajax is now defined

我不喜欢将窗口附加到全局,因为它会影响一些类型检查窗口的插件.不是阻挡者,但我很想知道是否还有其他方法可以解决这个问题.

Answer 1

我可以发誓,在阅读jquery源代码之后,我在问这个问题的那天尝试了这个,但它没有用.我刚刚再次尝试,它正在工作.

tl; dr jQuery将$附加到浏览器模拟器的窗口命名空间.

var document    = require('jsdom').jsdom(),
    window      = document.parentWindow;
require('jquery')(window);
var $ = window.$;

希望它对其他人有用.

Answer 2

虽然Stubs很好,但它们不如Focks那么好,而Fakes不如Mocks好.我建议使用Sinon更有趣的功能来创建Fakes.

window.$你可以假装XMLHttpRequest和/或伪造,而不是存根XMLHttpResponse

var xhr, requests;

before(function () {
    xhr = sinon.useFakeXMLHttpRequest();
    requests = [];
    xhr.onCreate = function (req) { requests.push(req); };
});

after(function () {
    // Like before we must clean up when tampering with globals.
    xhr.restore();
});

it("makes a GET request for todo items", function () {
    getTodos(42, sinon.spy());

    assert.equals(requests.length, 1);
    assert.match(requests[0].url, "/todo/42/items");
});

或者您甚至可以模拟服务器

var server;

before(function () { server = sinon.fakeServer.create(); });
after(function () { server.restore(); });

it("calls callback with deserialized data", function () {
    var callback = sinon.spy();
    getTodos(42, callback);

    // This is part of the FakeXMLHttpRequest API
    server.requests[0].respond(
        200,
        { "Content-Type": "application/json" },
        JSON.stringify([{ id: 1, text: "Provide examples", done: true }])
    );

    assert(callback.calledOnce);
});

你可以得到非常有创意,惩戒超时,延误,404的,401的.因为您仍将使用JQuery.Ajax对象库,同时注入增加请求和响应的间谍,您可以创建更多真实且强大的测试,而不必花费所有可能性.