如何使用Jasmine模拟JQuery？ [英] How to mock JQuery with Jasmine?

问题描述

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

  spyOn（$。fn，'init'）。andCallThrough（）; 
 //我的代码
 expect（$。init）.toHaveBeenCalled（）; 
  

但在此次通话后， $（'div'）返回对象{selector =div，context = document，NaN = div.spec，more ...} ，但必须返回（和 $ .fn.init（'div'）确实返回它）： [div.jasmine_reporter，div.banner，div.logo，还有4个...... ] 。这个东西自然会破坏代码，因为JQuery对象不再可用。

示例：

假设我想测试一个JQuery选择器已被调用，我写道：

  it（'tests'， function（）{
 spyOn（$。fn，'init'）。andCallThrough（）; 
 $（'html'）; 
 expect（$。init）.toHaveBeenCalled（）; 
}）; 
  

这导致来自Jasmine的错误：错误：预计是间谍，但是未定义。。然后我在$（'html'）行的FireBug中设置断点，当我到达那里并尝试观看时， $（'html'）的值是，我得到：

 对象{selector =html，context = document，NaN = html，more ...} 
  

如果我注释掉 spyOn ，那一行 $（'html'）评估为：

  [html] 
  

我期望用 spyOn 作为好吧。

解决方案

看起来好像Jasmine通过用包装版本替换备用对象来做间谍活动似乎搞乱了整个jQuery，因为（来自jQuery源代码）：

// jQuery对象实际上只是init构造函数'增强'

我建议试图监视init使用的其中一个函数，特别是merge。如果你看一下jQuery代码，你会发现任何HTML => DOM的东西最终会通过合并调用返回：

  return jQuery.merge（this，selector）; 
  

（如果您正在查看jQuery 1.5.1的源代码，那就是第152行）。 / p>

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

How can I test that a certain JQuery selector has been executed with Jasmine? I'm trying to do the following:

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

But after this call, $('div') returns Object { selector="div", context=document, NaN=div.spec, more...}, though it has to return (and $.fn.init('div') does return it): [div.jasmine_reporter, div.banner, div.logo, 4 more...]. This stuff naturally breaks the code since the JQuery object is no longer usable.

Example:

Say I want to test that a JQuery selector has been called, I write:

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

This result it an error from Jasmine: Error: Expected a spy, but got undefined.. Then I set a breakpoint in FireBug on $('html') line and when I get there and try to watch, what the value of $('html') is, I get:

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

If I comment out spyOn, on that line $('html') evaluates to:

[html]

Which is what I expected to see with spyOn as well.

解决方案

Well it looks like Jasmine does it's spy stuff by replacing the spied-on object with a wrapped version, and that seems to be messing up jQuery as a whole because (from the jQuery source code):

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

I'd suggest trying to spy on one of the functions that init uses, specifically "merge". If you look at the jQuery code, you'll see that any HTML=>DOM stuff ultimately gets returned through a merge call:

return jQuery.merge( this, selector );

(that's line 152 if you happen to be looking at the source of jQuery 1.5.1).

By spying on merge you should be able to test whatever you're testing, without inadvertently replacing the guts of jQuery.

这篇关于如何使用Jasmine模拟JQuery？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！