javascript - 如何为 jquery 调用 `$(some)` 创建 spy ？

Question

我定义了一个requirejs模块来提供获取浏览器宽度的函数:

browserTool.js

define(['jquery'], function($) {
    return {
        getBrowserWidth: function() {
            return $(window).width();
        }
    }
});

现在我想为它编写单元测试，所以我想模拟jquery:

define(['jquery', 'browserTool'], function(jquery, browserTool) {
   describe("test", function() {
      it("should do something", function() {
         spyOn(jquery, "apply").and.returnValue({
            width: function() { return 300; }
         }); 
         expect(browserTool.getBrowserWidth()).toEqual(300);
      });
   });
});

你可以看到我想使用:spyOn(jquery, "apply")来模拟，但是这个测试不起作用，看来我监视了错误的方法。

如何解决？

Answer 1

您无法直接监视 jQuery 选择器，因为它们每次都会返回不同的对象。当您无法获取引用时，Jasmine SpyOn 的一般技巧是将 spy 放置在原型(prototype)上。使用 jQuery，它看起来像这样:

//spyOn $(window).width():
spyOn($.fn, 'width').

如果您愿意，您可以从 spy 调用的参数中提取参数(并查看它是在窗口上调用的)。

至于 apply:apply 是一个纯 javascript 方法，不是 jQuery 的一部分，因此你可以通过它所属的函数原型(prototype)来窥探它:

spyOn(Function.prototype, 'apply');

(不过我没有尝试过这段代码)