如何为 jquery 调用`$(some)` 创建一个间谍？答案

【问题标题】：How to create a spy for jquery invocation `$(some)`?如何为 jquery 调用`$(some)` 创建一个间谍？
【发布时间】：2014-09-28 07:42:01
【问题描述】：

我定义了一个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") 来模拟，但是这个测试不起作用，似乎我发现了一个错误的方法。

如何解决？

【问题讨论】：

标签： javascript jquery unit-testing jasmine spy

【解决方案1】：

你不能直接监视 jQuery 选择器，因为它们每次都返回不同的对象。当您无法获得参考时，一个通用的 Jasmine SpyOn 技巧是将间谍放置在原型上。使用 jQuery，它看起来像这样：

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

如果你愿意，你可以从 spy 调用的参数中提取参数（并看到它是在窗口上调用的）。

至于apply：apply是一个纯javascript方法，不是jQuery的一部分，所以你大概可以通过它所属的函数原型窥探到它：

spyOn(Function.prototype, 'apply');

（虽然我没有尝试过这段代码）

【讨论】：