在节点环境中阻塞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);

PROBLEM $.ajax现在还没有定义。我怀疑这是因为现在它返回绑定到特定元素的jQuery对象，但不完全确定。有人知道为什么和如何绕过这件事吗？

编辑--我的一个朋友，他不在--所以他指出，如果我们把window附加到全局，我们可以得到普通的jquery对象，而不是工厂

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

我不喜欢附加窗口到全局，因为它会影响一些插件，类型检查窗口。不是一个拦截器，但我想看看是否有其他方法来解决这个问题。

Answer 1

我可以发誓，在阅读了jquery源代码之后，我在问这个问题的那天就尝试过了，但是它没有起作用。我刚才又试了一次，效果很好。

jQuery博士将$附加到浏览器模拟器的窗口命名空间。

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

希望它对其他人有用。

Answer 2

虽然斯塔布斯很好，但他们没有赝品那么好，也没有莫克斯那么好。我建议使用Sinon更耐人寻味的特性来制作赝品。

与其固执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对象库，同时注入用于增强请求和响应的间谍，因此您可以创建更真实和健壮的测试，而不是必须对所有可能性进行存根处理。

Answer 3

在节点中有几个选项可以执行请求：

1)使用jquery

var $ = require('jquery')(require("jsdom").jsdom().parentWindow);
// now $.ajax works well

( 2)使用npm请求https://www.npmjs.com/package/request

3)使用本机对象XHR

我测试了这三个选项，最后我使用了包请求(以避免jquery +jsdom之类的额外包)，对于一些奇怪的情况，我使用了本机XHR。