Make reactor-router not break Jest tests (reactJs)

I am currently trying to add Jest tests to my React app (found here ).

However, when I run the following test,

/** @jsx React.DOM */

jest.dontMock('jquery');
jest.dontMock('../js/components/CategoryPage.jsx');
describe('Category Page', function() {
  var React = require('react/addons');
  var TestUtils = React.addons.TestUtils;
  var CategoryPage = require('../js/components/CategoryPage.jsx');
  it('renders into the page correctly', function() {
    // Render the CategoryPage into the document
    var categoryPage = TestUtils.renderIntoDocument(
      <CategoryPage params={{"category": "tests"}} />
    );
    expect(categoryPage).toBeDefined();
  });
});

      

        
        
        
      

    

I am getting the following error:

● Category Page › it renders into the page correctly
  - TypeError: Property 'makeHref' of object #<Object> is not a function
        at Navigation.makeHref (/home/stephen/reps/node_modules/react-            router/modules/mixins/Navigation.js:29:25)
        at React.createClass.getHref (/home/stephen/reps/node_modules/react-router/modules/components/Link.js:76:17)
        at React.createClass.render (/home/stephen/reps/node_modules/react-router/modules/components/Link.js:97:18)
        at ReactCompositeComponentMixin._renderValidatedComponent (/home/stephen/reps/node_modules/react/lib/ReactCompositeComponent.js:1260:34)
        at wrapper [as _renderValidatedComponent] (/home/stephen/reps/node_modules/react/lib/ReactPerf.js:50:21)
        at ReactCompositeComponentMixin.mountComponent     (/home/stephen/reps/node_modules/react/lib/ReactCompositeComponent.js:802:14)
        at wrapper [as mountComponent] (/home/stephen/reps/node_modules/react/lib/ReactPerf.js:50:21)
        at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (/home/stephen/reps/node_modules/react/lib/ReactMultiChild.js:195:42)
        at ReactDOMComponent.Mixin._createContentMarkup (/home/stephen/reps/node_modules/react/lib/ReactDOMComponent.js:260:32)
        at ReactDOMComponent.Mixin.mountComponent (/home/stephen/reps/node_modules/react/lib/ReactDOMComponent.js:182:14)
        at ReactDOMComponent.wrapper [as mountComponent] (/home/stephen/reps/node_modules/react/lib/ReactPerf.js:50:21)
        at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (/home/stephen/reps/node_modules/react/lib/ReactMultiChild.js:195:42)
        at ReactDOMComponent.Mixin._createContentMarkup (/home/stephen/reps/node_modules/react/lib/ReactDOMComponent.js:260:32)

      

        
        
        
      

    

Both my application and component CategoryPage

use a reactive router on purpose. CategoryPage has a mixin that uses authentication for the router. Based on my own debugging, I found that the error occurs when Jest tries to call makeHref

, one of the built-in react-router methods for navigation.

To fix this, I first tried calling jest.dontMock('react-router')

, but that had no effect. The problem is that, without mocking CategoryPage

, the joke automatically and irreversibly turns on all its dependencies, unmocked.

Part of the problem this problem is so hard to solve is that most people using Jest with React don't seem to be testing their components, either because they are not that test oriented or because they use Flux and nothing else. testing stores, Dispatchers, etc. We are not using Flux yet, so this is not an option for us, but we may switch in the future.

EDIT 1: The test passes if I remove jest.dontMock('../js/components/CategoryPage.jsx')

, but then it is not possible to test the functionality of this component.

EDIT 2: When I exclude jest.dontMock('jquery')

, I get another mixin related error that I use to create modals:

Category Page › it encountered a declaration exception
- TypeError: 
/home/stephen/reps/js/components/CategoryPage.jsx:  
/home/stephen/reps/js/components/Feed.jsx:     
/home/stephen/reps/js/components/InvestmentButton.jsx: 
/home/stephen/reps/js/components/Modal.jsx: 
/home/stephen/reps/js/mixins/BootstrapModalMixin.jsx: 
/home/stephen/reps/node_modules/bootstrap/dist/js/npm.js: 
/home/stephen/reps/node_modules/bootstrap/js/alert.js: Cannot call method 'on' of undefined

      

        
        
        
      

    

EDIT 3: I seem to have isolated a bug to react to the Navigation mixin where it calls this.context.makeHref

. The React team has been deprecated this.context

since version .9, so I believe this could be a source of problems. Thus, any work or fix for is this.context

appreciated.