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!
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.