title: How do I specify a Sinon.JS spy function as part of a class definition?
body: <p>I am writing a Backbone.js app using Require.js and Backbone.Marionette and testing it using Mocha with Chai, Sinon, and Sinon-Chai.  I've been generally using <a href="https://github.com/jsoverson/todomvc/tree/master/labs/dependency-examples/backbone_marionette_require" rel="nofollow">Jarrod Overson's Backbone Marionette with Require.JS TODO sample</a> as a reference for application structure and <a href="http://tinnedfruit.com/2011/03/03/testing-backbone-apps-with-jasmine-sinon.html" rel="nofollow">Jim Newbery's posts on testing Backbone apps</a> as a reference for unit testing.</p>
  
  <p>My problem is trying to test adding a <a href="https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.itemview.md" rel="nofollow">Marionette ItemView</a> to a <a href="https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.application.md" rel="nofollow">Marionette Application object</a>.  I figured the best way to test that the ItemView is added is watch for its <code>render()</code> method to be called.  Since Marionette provides a default <code>render()</code> implementation, I thought it best to just use a Sinon spy for the <code>onRender()</code> callback.</p>
  
  <p>I used <a href="https://github.com/iammerrick/Squire.js" rel="nofollow">Squire.JS</a> to return a stub class for my ItemView as shown below:</p>
  
  <pre><code>define(['Squire', 'backbone.marionette'], function(Squire, Marionette) {
      describe('App', function() {
  
          var testContext;
  
          beforeEach(function(done) {
              testContext = {};
  
              testContext.injector = new Squire();
  
              testContext.renderSpy = sinon.spy();
  
              testContext.injector.mock('app/views/Header', function() {
                  var stub_template_html = "&lt;div&gt;&lt;/div&gt;";
                  var HeaderStub = Marionette.ItemView.extend({
                      template: function(serialized_model) {
                          return _.template(stub_template_html);
                      }
                  });
                  return HeaderStub;
              });
  
              testContext.injector.require(['app/app'], function(app) {
                  testContext.app = app;
                  done();
              });
          });
  
          it ('Should add a Header view to the \'header\' region', function() {
              testContext.app.start();
              expect(testContext.renderSpy).to.be.called();
          });
  </code></pre>
  
  <p>When I run Mocha via Chrome, I get the error I expect: "expected spy to have been called at least once, but it was never called."  However, if I specify the Sinon spy function as the <code>onRender()</code> callback, as shown below</p>
  
  <pre><code>var HeaderStub = Marionette.ItemView.extend({
      // ...
      onRender: testContext.renderSpy
  });
  </code></pre>
  
  <p>I get an error stating that the <code>called()</code> method is not a function.</p>
  
  <p>Is there a way to specify a Sinon spy function as a method in a class definition?  Alternatively, is there a better way to test this code?  I'm fairly new to JavaScript, so this may be a more general problem rather than a Sinon-specific problem.</p>
  
  <p>Any help is appreciated.</p>