使用 sinon 存根 Backbone 的 listenTo 回调

Question

我试图通过存根 Backbone.View 的 listenTo 回调方法来实现一个简单的测试。

但是，我似乎无法直接执行此操作 - 我必须将回调包装在匿名函数中。知道为什么会发生这种情况，我怎样才能避免包装器并仍然能够存根回调？

这不起作用：

// 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

您可以在创建视图原型之前对其进行存根：

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

view.myFunc.called; // is true;

诗乃还有一个Util function，叫做createStubInstance。但是，我从未尝试过，所以我不知道它的效果如何；

sinon.createStubInstance(MyView);

编辑以解决评论（用相当宽松的术语）：

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

在创建视图后对 myFunc 函数进行存根只会更改 view.myFunc 指向的引用（它会更改为新的存根函数引用而不是 MyView.prototype.myFunc 引用）。但这不会改变 listenTo 使用的引用。

解决问题的一种方法是做你所做的：

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

这通过将listenTo 指向一个匿名函数的引用来解决问题，当在事件触发器上运行时，它将在调用它时从视图中评估myFunc，这将是存根引用。

解决此问题的另一种方法是存根原型函数，因此在创建实例时，listenTo 使用的myFunc 的引用就是存根函数。

希望这会有所帮助。