javascript - 如何用 Jasmine 模拟 JQuery？

Question

如何测试某个 JQuery 选择器是否已使用 Jasmine 执行？我正在尝试执行以下操作:

spyOn($.fn, 'init').andCallThrough(); 
// my code
expect($.init).toHaveBeenCalled();

但是在这个调用之后，$('div') 返回 Object { selector="div", context=document, NaN=div.spec, more...}，虽然它必须返回(并且 $.fn.init('div') 确实返回它):[div.jasmine_reporter, div.banner, div.logo, 4 more ...]。由于 JQuery 对象不再可用，这些东西自然会破坏代码。

示例:

假设我想测试一个 JQuery 选择器是否被调用，我写:

    it('tests', function() {
        spyOn($.fn, 'init').andCallThrough();
        $('html');
        expect($.init).toHaveBeenCalled();
    });

这导致 Jasmine 出错:Error: Expected a spy, but got undefined.。然后我在 $('html') 行的 FireBug 中设置一个断点，当我到达那里并尝试观察时，$('html') 的值是什么，我得到:

Object { selector="html", context=document, NaN=html, more...}

如果我注释掉 spyOn，那一行 $('html') 的计算结果为:

[html]

这也是我希望通过 spyOn 看到的。

Answer 1

好吧，看起来 Jasmine 通过用包装版本替换被监视的对象来执行 spy 操作，这似乎把 jQuery 作为一个整体搞砸了，因为(来自 jQuery 源代码):

// The jQuery object is actually just the init constructor 'enhanced'

我建议尝试监视 init 使用的函数之一，特别是“合并”。如果您查看 jQuery 代码，您会发现任何 HTML=>DOM 内容最终都会通过合并调用返回:

return jQuery.merge( this, selector );

(如果您碰巧正在查看 jQuery 1.5.1 的源代码，那就是第 152 行)。

通过监视合并，您应该能够测试您正在测试的任何内容，而不会无意中替换 jQuery 的内容。