javascriptreactjsjestjsreactjs-testutils

Cannot call method 'toUpperCase' of undefined in simple React/Jest test


Stumped by this..

I'm trying to test that a component is rendered successfully. The test looks like:

jest.dontMock("../opportunities/OpportunityList");

var OpportunityList = require("../opportunities/OpportunityList");
var opportunitiesArray = [];

describe("OpportunityList", function() {

  it("should render", function() {
    var opportunityList = TestUtils.renderIntoDocument(
      <OpportunityList opportunities={opportunitiesArray}
                       bucketValue="fooo"/>

    );
    expect(TestUtils.isCompositeComponent(opportunityList)).toBeTruthy();
  });

});

And the component:

var PipeableOpportunity = require("./PipeableOpportunity");

var OpportunityList = React.createClass({
  getInitialState: function() {
    return {
      componentWidth: null
    };
  },

  componentDidMount: function() {
    this.setState( { componentWidth: React.findDOMNode(this).offsetWidth } );
  },

  render: function() {
    var bucketValue = this.props.bucketValue,
        opportunities = this.props.opportunities,
        componentWidth = this.state.componentWidth,
        pipelineSettings = this.props.pipelineSettings;

    var opportunityList = opportunities.map( function(opportunity) {
      return (
        <PipeableOpportunity key={opportunity.id}
                             opportunity={opportunity}
                             bucketValue={bucketValue}
                             componentWidth={componentWidth}
                             pipelineSettings={pipelineSettings}/>
      );
    });

    return (
      <ol className={bucketValue}>
        {opportunityList}
      </ol>
    );
  }

});

module.exports = OpportunityList;

Running the test produces the following output:

 FAIL  __tests__/OpportunityList-test.js (1.645s)
● OpportunityList › it should render
  - TypeError: Cannot call method 'toUpperCase' of undefined
        at autoGenerateWrapperClass (/home/tmillwardwright/mwri_git/piper/node_modules/react/lib/ReactDefaultInjection.js:53:19)
        at Object.getComponentClassForElement (/home/tmillwardwright/mwri_git/piper/node_modules/react/lib/ReactNativeComponent.js:59:49)
        at ReactCompositeComponentMixin._processProps (/home/tmillwardwright/mwri_git/piper/node_modules/react/lib/ReactCompositeComponent.js:429:44)
        at ReactCompositeComponentMixin.mountComponent (/home/tmillwardwright/mwri_git/piper/node_modules/react/lib/ReactCompositeComponent.js:127:28)
        at wrapper [as mountComponent] (/home/tmillwardwright/mwri_git/piper/node_modules/react/lib/ReactPerf.js:70:21)
        at Object.ReactReconciler.mountComponent (/home/tmillwardwright/mwri_git/piper/node_modules/react/lib/ReactReconciler.js:38:35)
        at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (/home/tmillwardwright/mwri_git/piper/node_modules/react/lib/ReactMultiChild.js:192:44)
        at ReactDOMComponent.Mixin._createContentMarkup (/home/tmillwardwright/mwri_git/piper/node_modules/react/lib/ReactDOMComponent.js:289:32)
        at ReactDOMComponent.Mixin.mountComponent (/home/tmillwardwright/mwri_git/piper/node_modules/react/lib/ReactDOMComponent.js:199:12)
        at Object.ReactReconciler.mountComponent (/home/tmillwardwright/mwri_git/piper/node_modules/react/lib/ReactReconciler.js:38:35)
        at ReactCompositeComponentMixin.mountComponent (/home/tmillwardwright/mwri_git/piper/node_modules/react/lib/ReactCompositeComponent.js:247:34)
        at wrapper [as mountComponent] (/home/tmillwardwright/mwri_git/piper/node_modules/react/lib/ReactPerf.js:70:21)
        at Object.ReactReconciler.mountComponent (/home/tmillwardwright/mwri_git/piper/node_modules/react/lib/ReactReconciler.js:38:35)
        at ReactCompositeComponentMixin.mountComponent (/home/tmillwardwright/mwri_git/piper/node_modules/react/lib/ReactCompositeComponent.js:247:34)
        at wrapper [as mountComponent] (/home/tmillwardwright/mwri_git/piper/node_modules/react/lib/ReactPerf.js:70:21)
        at Object.ReactReconciler.mountComponent (/home/tmillwardwright/mwri_git/piper/node_modules/react/lib/ReactReconciler.js:38:35)
        at mountComponentIntoNode (/home/tmillwardwright/mwri_git/piper/node_modules/react/lib/ReactMount.js:248:32)
        at ReactReconcileTransaction.Mixin.perform (/home/tmillwardwright/mwri_git/piper/node_modules/react/lib/Transaction.js:134:20)
        at batchedMountComponentIntoNode (/home/tmillwardwright/mwri_git/piper/node_modules/react/lib/ReactMount.js:269:15)
        at ReactDefaultBatchingStrategyTransaction.Mixin.perform (/home/tmillwardwright/mwri_git/piper/node_modules/react/lib/Transaction.js:134:20)
        at Object.ReactDefaultBatchingStrategy.batchedUpdates (/home/tmillwardwright/mwri_git/piper/node_modules/react/lib/ReactDefaultBatchingStrategy.js:66:19)
        at Object.batchedUpdates (/home/tmillwardwright/mwri_git/piper/node_modules/react/lib/ReactUpdates.js:110:20)
        at Object.ReactMount._renderNewRootComponent (/home/tmillwardwright/mwri_git/piper/node_modules/react/lib/ReactMount.js:404:18)
        at Object.wrapper [as _renderNewRootComponent] (/home/tmillwardwright/mwri_git/piper/node_modules/react/lib/ReactPerf.js:70:21)
        at Object.ReactMount.render (/home/tmillwardwright/mwri_git/piper/node_modules/react/lib/ReactMount.js:493:32)
        at Object.wrapper [as render] (/home/tmillwardwright/mwri_git/piper/node_modules/react/lib/ReactPerf.js:70:21)
        at Object.ReactTestUtils.renderIntoDocument (/home/tmillwardwright/mwri_git/piper/node_modules/react/lib/ReactTestUtils.js:52:18)
        at Spec.<anonymous> (/home/tmillwardwright/mwri_git/piper/app/assets/javascripts/components/__tests__/OpportunityList-test.js:14:37)
        at jasmine.Block.execute (/home/tmillwardwright/mwri_git/piper/node_modules/jest-cli/vendor/jasmine/jasmine-1.3.0.js:1065:17)
        at jasmine.Queue.next_ (/home/tmillwardwright/mwri_git/piper/node_modules/jest-cli/vendor/jasmine/jasmine-1.3.0.js:2098:31)
        at null._onTimeout (/home/tmillwardwright/mwri_git/piper/node_modules/jest-cli/vendor/jasmine/jasmine-1.3.0.js:2088:18)
        at Timer.listOnTimeout [as ontimeout] (timers.js:112:15)

I'm running a script before the tests to require React, and it is in the unmockedModulePathPatterns list in my package.json. See below:

React = require("react/addons");
Radium = require("radium");
GlobalStyles = require("../../../GlobalStyles");
TestUtils = React.addons.TestUtils;
routerStub = require("./routerStub");

The component renders fine in a real app.

Using node debug I've ascertained that the test gets as far as running render, but not componentDidMount but beyond that I haven't got any further information, or ideas as to what to try!


Solution

  • After upgrading to more recent versions of React & Jest, it became clear that a valid component was not being created.

    The PipeableOpportunity component rendered by the OpportunityList component was exported as a higher order component, which seems to break Jest's AutoMock functionality.

    For now I've just turned AutoMock off:

    Jest.autoMockOff();

    which works, but obviously isn't quite ideal. I suspect the proper solution is to manually mock the PipeableOpportunity component.