title: Stubbing a React component method with Sinon
body: <p>I'm trying to stub a <a href="http://facebook.github.io/react/">React</a> component method for testing purpose:</p>
  
  <pre class="lang-js prettyprint-override"><code>var Comp = React.createClass({
    displayName: "Comp",
  
    plop: function() {
      console.log("plop");
    },
  
    render: function() {
      this.plop();
      return React.DOM.div(null, "foo");
    }
  });
  
  var stub = sinon.stub(Comp.type.prototype, "plop");
  React.addons.TestUtils.renderIntoDocument(Comp());
  sinon.assert.called(stub); // throws
  </code></pre>
  
  <p>This sadly keeps printing "plop" onto the console… and the assertion fails.</p>
  
  <p>Note: Directly stubbing the spec object method works, but then you have to export the component constructor and the spec separately so they're both available in tests… Also, you'd need to stub the spec before even creating the component class; not so convenient:</p>
  
  <pre class="lang-js prettyprint-override"><code>var CompSpec = {
    displayName: "Comp",
  
    plop: function() {
      console.log("plop");
    },
  
    render: function() {
      this.plop();
      return React.DOM.div("foo");
    }
  };
  
  var stub = sinon.stub(CompSpec, "plop");
  var Comp = React.createClass(CompSpec);
  React.addons.TestUtils.renderIntoDocument(Comp());
  
  // plop() is properly stubbed, so you can
  sinon.assert.called(stub); // pass
  </code></pre>
  
  <p>Can you think of another strategy to easily stub a React component method?</p>