Question

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

product_id

}）;

代码如下：

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

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

});

简单的东西。当我在Karma调试器中调试代码并在控制台中执行utilityNavigation = { test() { let foo = $('.utility-navigation'); return foo; } }时，我从间谍那里得到$('.utility-navigation')。但是测试结果给了我一个空的JQuery对象，而不是间谍的返回值。

Answer 1

你观察到的是绝对正确的。这应该不起作用。 SpyOn函数有两个参数：1。现有对象（＆＃34; window＆＃34;是现有对象，此处没有问题）; 2.此对象的函数的字符串名称（＆＃34; '$'＆＃34;不是窗口对象的函数。）。我相信这是你问题的答案＆＃34;为什么SpyOn $ Jquery与Jasmine不起作用？＆＃34;

如果您需要有关如何使其发挥作用的更多信息，那么就此有很多答案;不想复制和粘贴答案。例如，这是一个很好的开始方式：Spying on JQuery Selectors in Jasmine

Answer 2

使用窗口。$应该从简单的jasmine-javascript-jquery角度看起来很好
我怀疑空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');
  });
});

SpyOn $ Jquery与Jasmine无法正常工作

2 个答案: