与Jasmine的SpyOn $ Jquery无法正常工作

Question

我正在尝试用Jasmine SpyOn模拟一个Jquery选择器

describe('initialising the navigation bar', ()=> {
it('should do something', () => {

  spyOn(window, '$').and.returnValue("bar");
  expect(utilityNavigation.test()).toBe('bar');

});

}）;

代码如下：

utilityNavigation = {
  test() {
    let foo = $('.utility-navigation');
    return foo;
  }
}

简单的东西。 当我在调试噶调试代码并执行$('.utility-navigation')在控制台中我得到的bar从谍预期。 但是测试结果给了我一个空的JQuery对象，而不是间谍的返回值。

Answer 1

您观察到的是绝对正确的。 这应该行不通。 SpyOn函数有两个参数：1.现有对象（“ window ”是现有对象，此处没有问题）； 2.此对象的功能的字符串名称（“ '$' ”不是窗口对象的功能。）。 我相信这是您的问题“为什么使用Jasmine的SpyOn $ Jquery无法正常工作？”的答案。

如果您需要有关如何使其工作的更多信息，则可以在SO上找到很多有关此问题的答案。 不想复制并粘贴答案。 例如，这是一个很好的起点： 监视Jasmine中的JQuery选择器

Answer 2

• 从纯Jasmine-javascript-jquery的角度来看，使用window。$应该可以正常工作
• 我怀疑空div的原因可能是html元素在页面上尚不可用
• 您能否在beforeEach尝试异步回调，以便div加载以防万一

这是我仅使用jQuery和jasmine尝试异步div加载测试的方法，并且工作正常

<div class='utility-navigation' data-test="testString"></div>

utilityNavigation = {
  test: function() {
    let foo = $('.utility-navigation');
    return foo;
  }
}

describe('initialising the navigation bar', () => {
  beforeEach(function(done) {
    setTimeout(function() {
      console.log("waiting to ensure the div is loaded up on the page");
      done();
    }, 1);
  });
  it('should do something', () => {
    //pre    
    console.log(utilityNavigation.test().data('test'));
    var spy = spyOn(window, '$').and.returnValue("bar");
    //post
    console.log($('.utility-navigation'));
    expect(utilityNavigation.test()).toBe('bar');
  });
});