javascript - Stubbing Backbone listenTo 回调与 sinon

Question

我正在尝试通过 stub Backbone.View 的 listenTo 回调方法来实现一个简单的测试。

但是，我似乎不能直接这样做——我必须将回调包装在一个匿名函数中。知道为什么会发生这种情况吗？我怎样才能避免包装器并仍然能够对回调进行 stub ？

这不起作用:

// MyView.js

var MyView = Backbone.View.Extend({

  initialize: function() {
    this.listenTo('some:event', this.myFunc);
  },

  myFunc: function() {
    //.. do useful stuff
  }

});

// Trying to stub with sinon

var view = new MyView();
sinon.stub( view, 'myFunc' );

view.trigger('some:event');

view.myFunc.called; // is false;

但是，这是可行的:

// MyView.js

var MyView = Backbone.View.Extend({

  initialize: function() {
    this.listenTo('some:event', function() { this.myFunc });
  },

  myFunc: function() {
    //.. do useful stuff
  }

});

// Trying to stub with sinon

var view = new MyView();
sinon.stub( view, 'myFunc' );

view.trigger('some:event');

view.myFunc.called; // is true;

Answer 1

您可以在创建 View 原型(prototype)之前将其 stub :

sinon.stub(MyView.prototype, 'myFunc');
var view = new MyView();
view.trigger('some:event');

view.myFunc.called; // is true;

Sinon 也有一个 Util function称为 createStubInstance。但是，我从来没有尝试过，所以我不知道它的效果如何；

sinon.createStubInstance(MyView);

编辑以解决评论(用相当宽松的术语):

因为方式prototypal inheritance works以及 JS 通过引用传递函数的方式。当 View 的实例首次创建时，myFunc 指向 MyView.prototype.myFunc 的引用。这意味着当 initialize 函数被调用时，listenTo 事件处理程序被设置并且它正在使用它当时对 myFunc 的引用.

在创建 View 后 stub myFunc 函数只会更改 view.myFunc 指向的引用(它更改为新的 stub 函数引用而不是 MyView.prototype.myFunc引用)。但这不会改变 listenTo 正在使用的引用。

解决问题的一种方法是按照您所做的去做:

this.listenTo('some:event', function() { this.myFunc() });

这通过将 listenTo 指向一个匿名函数的引用来解决问题，该匿名函数在事件触发器上运行时将从 View 中评估调用，这将是 stub 引用。

解决这个问题的另一种方法是对原型(prototype)函数进行 stub ，因此在创建实例时，listenTo 使用的 myFunc 的引用就是 stub 函数.

希望这对您有所帮助。