title: Jest testing of react-router
body: <p>I am trying to write a simple jest test for a react-router Route module.</p>
  
  <p>The component has a button and when clicking on it, there is a programatic navigation to another route by using the 'transitionTo' method. </p>
  
  <p>I keep getting the following error, even after adding the stubRouterContext utils (as explained <a href="https://github.com/rackt/react-router/blob/v0.12.4/docs/guides/testing.md" rel="nofollow">here</a>), and wrapping my UserDetails component in the stubRouterContext:</p>
  
  <p><code>TypeError: Property 'transitionTo' of object #&lt;Object&gt; is not a function</code></p>
  
  <p>I am using react 12.2, react-router 12.4, and jest 2.2</p>
  
  <p>My dummy component:</p>
  
  <pre><code>var Navigation, React, Router;
  
  React = require('react/addons');
  Router = require('react-router');
  Navigation = require('react-router').Navigation;
  
  module.exports = React.createClass({
  
    mixins: [Navigation],
  
    onButtonClick: function() {
      this.transitionTo('next-page');
    },
  
    render: function() {
      return (&lt;button onClick={@onButtonClick}&gt;Go to next page&lt;/button&gt;)
    }
  });
  </code></pre>
  
  <p>My test file:</p>
  
  <pre><code>jest.dontMock('./../utils/stub-router-context')
      .dontMock('../dummy-component');
  
  describe('DummyComponent', function() {
    it('let you navigate to next page', function() {
  
      var React = require('react/addons');
      var TestUtils = React.addons.TestUtils;
      var stubRouterContext = require('./../utils/stub-router-context');
      var DummyComponent = require('../dummy-component');
  
      var Subject = stubRouterContext(DummyComponent);
      dummyComponent = TestUtils.renderIntoDocument(&lt;Subject/&gt;);
  
      button = TestUtils.findRenderedDOMComponentWithTag(dummyComponent, 'button');
      React.addons.TestUtils.Simulate.click(button);
  
    });
  });
  </code></pre>
  
  <p>My stub-router-context.cjsx file:</p>
  
  <pre><code>var React = require('react/addons');
  var func = React.PropTypes.func;
  var _ = require('lodash');
  
  module.exports  = function(Component, props, stubs) {
    return React.createClass({
      childContextTypes: {
        makePath: func,
        makeHref: func,
        transitionTo: func,
        replaceWith: func,
        goBack: func,
        getCurrentPath: func,
        getCurrentRoutes: func,
        getCurrentPathname: func,
        getCurrentParams: func,
        getCurrentQuery: func,
        isActive: func
      },
      getChildContext: function() {
        return _.merge({}, {
          makePath: function() {},
          makeHref: function() {},
          transitionTo: function() {},
          replaceWith: function() {},
          goBack: function() {},
          getCurrentPath: function() {},
          getCurrentRoutes: function() {},
          getCurrentPathname: function() {},
          getCurrentParams: function() {},
          getCurrentQuery: function() {},
          isActive: function() {}
        }, stubs);
      },
      render: function() {
        return React.createElement(Component, props);
      }
    });
  };
  </code></pre>