3

I'm currently trying to add Jest tests to a React application (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 get 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 app and the CategoryPage component specifically use react-router. The CategoryPage contains a mixin which uses react-router for authentication. Based on my own debugging, I have found that the error is occurring when Jest tries to call makeHref, one of react-router's built-in methods for Navigation.

To fix this, I first tried calling jest.dontMock('react-router'), but this did not have any effect. The problem seems to be that, by not mocking CategoryPage, jest will automatically and irreversibly include all of its dependecies, unmocked.

Part of the reason this issue is so difficult to solve is because most people using Jest with React seem to not be testing their components, either because they are not as test-focused or because they are using Flux and only testing Stores, Dispatchers, etc. We are not yet using Flux, so this is not an option for us, but may be something we have to transition to in the future.

EDIT 1: The test passes if I remove the jest.dontMock('../js/components/CategoryPage.jsx') but then it is impossible to actually test the functionality of that component.

EDIT 2: When I exclude jest.dontMock('jquery') I get another error related to the mixin 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 have seemingly isolated the bug to react-router's Navigation mixin, where it calls this.context.makeHref. The React team has deprecated this.context since version .9 so I believe this may be the source of the problems. Thus, any work-around or fix for this.context is welcome.

an1lam
  • 629
  • 8
  • 15
  • I think you should file this as an issue on `react-router` github issues page https://github.com/rackt/react-router/issues – trekforever Nov 12 '14 at 19:04

2 Answers2

2

I went ahead and put together a fix which allows you to still use Jest.

https://labs.chie.do/jest-testing-with-react-router/

Chiedo
  • 7,288
  • 3
  • 26
  • 22
  • Helpful. Although it might be causing some problems... Any ideas if this http://stackoverflow.com/questions/32462730/nextstate-on-componentwillupdate-not-correct-while-testing-with-jest-using-also can be related? – Ferran Negre Sep 08 '15 at 16:22
1

I ended up figuring this out with some help from the creator of rackt-router after creating the issue found here: https://github.com/rackt/react-router/issues/465 .

I got around this by using Karma and Jasmine to test my application. I then used the stub function makeStubbedDescriptor found here: https://gist.github.com/rpflorence/1f72da0cd9e507ebec29.

an1lam
  • 629
  • 8
  • 15