SpyOn $ Jquery 与 Jasmine 不工作答案

【问题标题】：SpyOn $ Jquery with Jasmine not workingSpyOn $ Jquery 与 Jasmine 不工作
【发布时间】：2017-06-30 14:35:36
【问题描述】：

我正在尝试用 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;
  }
}

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

【问题讨论】：

标签： javascript jquery jasmine karma-jasmine

【解决方案1】：

你观察到的绝对正确。这不应该工作。 SpyOn 函数有两个参数： 1. 现有对象（“window”是现有对象，这里没有问题）； 2、这个对象的函数的字符串名称（“'$'”不是窗口对象的函数。）。我相信这就是您的问题“为什么 SpyOn $ Jquery with Jasmine 不起作用？”的答案？

如果您需要有关如何使其工作的更多信息，有很多关于 SO 的答案；不想复制和粘贴答案。例如，这是一个很好的开始方式：Spying on JQuery Selectors in Jasmine

【讨论】：

【解决方案2】：

从简单的 jasmine-javascript-jquery 角度来看，使用 window.$ 应该可以正常工作
我怀疑空 div 的原因可能是页面上还没有 html 元素
您能否尝试使用异步回调beforeEach 以便加载 div 以防万一

这是我尝试使用 jQuery 和 jasmine 以及 works fine 进行异步 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');
  });
});

【讨论】：