hi,
- i am trying to fix an error in mocha test case.
- tried debugging it but not sure why the error is happening.
- providing the code below
- anonymous error is pointing to this line shallowRenderer.render();
Error
- shallow renderer tests for wcm-disclosure should not render anything when created: TypeError: Cannot read property '_currentElement' of null at [object Object].ReactCompositeComponentMixin._updateRenderedComponent (C:\sports-page-all\node_modules\react\lib\ReactCompositeComponent.js:559:52) at [object Object].ReactCompositeComponentMixin._performComponentUpdate (C:\sports-page-all\node_modules\react\lib\ReactCompositeComponent.js:544:10) at [object Object].ReactCompositeComponentMixin.updateComponent (C:\sports-page-all\node_modules\react\lib\ReactCompositeComponent.js:473:12) at [object Object].wrapper [as updateComponent] (C:\sports-page-all\node_modules\react\lib\ReactPerf.js:66:21) at [object Object].ReactCompositeComponentMixin.performUpdateIfNecessary (C:\sports-page-all\node_modules\react\lib\ReactCompositeComponent.js:421:12) at Object.ReactReconciler.performUpdateIfNecessary (C:\sports-page-all\node_modules\react\lib\ReactReconciler.js:102:22) at runBatchedUpdates (C:\sports-page-all\node_modules\react\lib\ReactUpdates.js:129:21) at ReactReconcileTransaction.Mixin.perform (C:\sports-page-all\node_modules\react\lib\Transaction.js:136:20) at ReactUpdatesFlushTransaction.Mixin.perform (C:\sports-page-all\node_modules\react\lib\Transaction.js:136:20) at ReactUpdatesFlushTransaction.assign.perform (C:\sports-page-all\node_modules\react\lib\ReactUpdates.js:86:38) at Object.flushBatchedUpdates (C:\sports-page-all\node_modules\react\lib\ReactUpdates.js:147:19) at Object.wrapper [as flushBatchedUpdates] (C:\sports-page-all\node_modules\react\lib\ReactPerf.js:66:21) at ReactDefaultBatchingStrategyTransaction.Mixin.closeAll (C:\sports-page-all\node_modules\react\lib\Transaction.js:202:25) at ReactDefaultBatchingStrategyTransaction.Mixin.perform (C:\sports-page-all\node_modules\react\lib\Transaction.js:149:16) at Object.ReactDefaultBatchingStrategy.batchedUpdates (C:\sports-page-all\node_modules\react\lib\ReactDefaultBatchingStrategy.js:62:19) at Object.enqueueUpdate (C:\sports-page-all\node_modules\react\lib\ReactUpdates.js:176:22) at enqueueUpdate (C:\sports-page-all\node_modules\react\lib\ReactUpdateQueue.js:24:16) at Object.ReactUpdateQueue.enqueueSetState (C:\sports-page-all\node_modules\react\lib\ReactUpdateQueue.js:190:5) at [object Object].ReactComponent.setState (C:\sports-page-all\node_modules\react\lib\ReactComponent.js:65:16) at [object Object].componentWillMount (C:/codebase/sports-page-all/src/components/disclosure.jsx:51:18) at [object Object].ReactCompositeComponentMixin.mountComponent (C:\sports-page-all\node_modules\react\lib\ReactCompositeComponent.js:210:12) at [object Object].wrapper [as mountComponent] (C:\sports-page-all\node_modules\react\lib\ReactPerf.js:66:21) at [object Object].ReactShallowRenderer._render (C:\sports-page-all\node_modules\react\lib\ReactTestUtils.js:362:14) at [object Object].ReactShallowRenderer.render (C:\sports-page-all\node_modules\react\lib\ReactTestUtils.js:344:8) at Context. (C:/codebase/sports-page-all/test/components/disclosure-tests.js:21:25) at callFn (C:\sports-page-all\node_modules\mocha\lib\runnable.js:286:21) at Test.Runnable.run (C:\sports-page-all\node_modules\mocha\lib\runnable.js:279:7) at Runner.runTest (C:\sports-page-all\node_modules\mocha\lib\runner.js:421:10) at C:\sports-page-all\node_modules\mocha\lib\runner.js:528:12 at next (C:\sports-page-all\node_modules\mocha\lib\runner.js:341:14) at C:\sports-page-all\node_modules\mocha\lib\runner.js:351:7 at next (C:\sports-page-all\node_modules\mocha\lib\runner.js:283:14) at Immediate._onImmediate (C:\sports-page-all\node_modules\mocha\lib\runner.js:319:5)
test case
import {expect} from 'chai';
import React from 'react';
import TestUtils from 'react-addons-test-utils';
import {BottomContainerComponent} from '../../src/components/bottom-container';
console.log("BottomContainerComponent");
describe('shallow renderer tests for ball-bottom-container ', function() {
let shallowRenderer = TestUtils.createRenderer();
let bottom-containers = [
{
'sports-user': 'bottom-container1',
'sports-representation': 'BottomContainer Text',
'sports-signal': 'BelowFootnotes'
}
];
it('should not render anything when created', () => {
console.log("BottomContainerComponent--->");
console.log(BottomContainerComponent);
console.log("BottomContainerComponent--->");
shallowRenderer.render(<BottomContainerComponent ballKey='bottom-container' bottom-containers={bottom-containers}/>);
let renderedElement = shallowRenderer.getRenderOutput();
expect(renderedElement).to.be.null;
});
});
functionality code
import React from 'react';
//import ReactDOMServer from 'react-dom/server';
import {connect} from 'react-redux';
import * as bottom-containerActions from '../redux/bottom-containers/bottom-containers-actions';
import ballRetriever from 'sports-ball-utils/lib/ball-retriever';
let _dispatch;
let success = function (data) {
let content = data[0];
//TODO: Get WCM REST service to return sports-signal as well
_dispatch(bottom-containerActions.addBottomContainer({
sports-user: content.key,
sports-representation: content.markup,
sports-signal: content.sports-signal
}));
};
//TODO: named export so I can get IDE docs
//TODO: turn this into a redux-thunk
/**
* Helper to add a bottom-container from WCM to the Standard Template footer
* @param bottom-containerWcmKey
* @param dispatch
*/
export function addWcmBottomContainer(bottom-containerWcmKey, dispatch) {
_dispatch = dispatch;
ballRetriever(bottom-containerWcmKey, success);
}
let customIdCounter = 0;
let BottomContainerComponent = React.createClass({
propTypes: {
sports-representation: React.PropTypes.string,
ballKey: React.PropTypes.string
},
getInitialState() {
return {
sports-user: ''
};
},
componentWillMount() {
if (this.props.ballKey) {
this.setState({sports-user: this.props.ballKey});
} else {
this.setState({sports-user: `customBottomContainer-${++customIdCounter}`});
}
},
componentDsports-userMount() {
if (this.props.ballKey) {
ballRetriever(this.state.sports-user, ([data]) => {
let content = data[0];
//TODO: Get WCM REST service to return sports-signal as well
_dispatch(bottom-containerActions.addBottomContainer({
sports-user: content.key,
sports-representation: content.markup,
sports-signal: content.sports-signal
}));
});
} else if (this.props.sports-representation) {
let {sports-representation} = this.props;
if (typeof sports-representation !== 'string') {
console.log('bottom-container not using string - discarding bottom-container!'); //eslint-disable-line
return;
}
this.props.dispatch(bottom-containerActions.addBottomContainer({
sports-user: this.state.sports-user,
sports-representation
}));
}
},
componentWillUnmount() {
this.props.dispatch(bottom-containerActions.removeBottomContainer(this.state.sports-user));
},
render() {
return false;
}
});
// empty connect to get access to dispatch()
export default connect()(BottomContainerComponent);
// Export non-connected BottomContainerComponent for testing
export {BottomContainerComponent};