I am using Enzyme to test a d3 chart component. I met problem that d3.select cannot find the container div and
TypeError: Cannot read property 'getAttribute' of null .
Chart component file: ProgramMeasureTrendsComponent.js
class ProgramMeasureTrendsComponent extends Component {
constructor(props){
super(props);
}
render() {
return (
<div className='programTrendChartContainer'></div>
**this is the d3 container div that d3 select cannot find.**
)
}
componentDidMount() {
this.createBarChart()
**use componentDidMount to render d3 chart.**
}
createBarChart() {
let { parsedData,xAxisKeys,chartTitle,width,height,
marginTop,marginLeft,marginBottom,marginRight } = this.props;
let keys = Object.keys(parsedData[0]).slice(0, 5);
let container = d3.select('.programTrendChartContainer');<=== getting error at this line
......
Test cast file
describe('<ProgramMeasureTrendsComponent />', () => {
it('Renders ProgramMeasureTrends Component', () => {
let store = mockStore({"dashboard":{"main":{"currentPeriod":"MONTH"}}});
const input = [
{
month:"Jan",
elevated:0,
group:"1486022400000",
hyperCrisis:0,
hyperStage1:0,
hyperStage2:0,
normal:0,
total:0
},
{
month:"Feb",
elevated:0,
group:"1488441600000",
hyperCrisis:0,
hyperStage1:0,
hyperStage2:0,
normal:0,
total:0
},
{
month:"Mar",
elevated:0,
group:"1491116400000",
hyperCrisis:0,
hyperStage1:0,
hyperStage2:0,
normal:0,
total:0
},
{
month:"Apr",
elevated:0,
group:"1493708400000",
hyperCrisis:0,
hyperStage1:0,
hyperStage2:0,
normal:0,
total:0
}
]
let container = mount( <ProgramMeasureTrendsComponent
store={store}
parsedData = { input }
xAxisKeys = {["Jan","Feb","Mar","Apr"]}
chartTitle = 'd3 chart title'
width = '400'
height = '400'
marginTop = '20'
marginBottom = '20'
marginLeft = '20'
marginRight = '20'
/>);
container.debug();
});
})
Error output
<ProgramMeasureTrendsComponent /> Renders ProgramMeasureTrends Component:
TypeError: Cannot read property 'getAttribute' of null
at Selection.selection_attr [as attr] (node_modules/d3-selection/build/d3-selection.js:590:16)
at ProgramMeasureTrendsComponent.createBarChart (src/modules/dashboard/main/components/ProgramMeasureTrendsComponent.js:47:30)
at ProgramMeasureTrendsComponent.componentDidMount (src/modules/dashboard/main/components/ProgramMeasureTrendsComponent.js:28:14)
at node_modules/react-dom/lib/ReactCompositeComponent.js:265:25
at measureLifeCyclePerf (node_modules/react-dom/lib/ReactCompositeComponent.js:75:12)
at node_modules/react-dom/lib/ReactCompositeComponent.js:264:11
at CallbackQueue.notifyAll (node_modules/react-dom/lib/CallbackQueue.js:76:22)
at ReactReconcileTransaction.close (node_modules/react-dom/lib/ReactReconcileTransaction.js:80:26)
at ReactReconcileTransaction.closeAll (node_modules/react-dom/lib/Transaction.js:206:25)
at ReactReconcileTransaction.perform (node_modules/react-dom/lib/Transaction.js:153:16)
at batchedMountComponentIntoNode (node_modules/react-dom/lib/ReactMount.js:126:15)
at ReactDefaultBatchingStrategyTransaction.perform (node_modules/react-dom/lib/Transaction.js:140:20)
at Object.batchedUpdates (node_modules/react-dom/lib/ReactDefaultBatchingStrategy.js:62:26)
at Object.batchedUpdates (node_modules/react-dom/lib/ReactUpdates.js:97:27)
at Object._renderNewRootComponent (node_modules/react-dom/lib/ReactMount.js:320:18)
at Object._renderSubtreeIntoContainer (node_modules/react-dom/lib/ReactMount.js:401:32)
at Object.render (node_modules/react-dom/lib/ReactMount.js:422:23)
at Object.renderIntoDocument (node_modules/react-dom/lib/ReactTestUtils.js:91:21)
at renderWithOptions (node_modules/enzyme/build/react-compat.js:200:24)
at new ReactWrapper (node_modules/enzyme/build/ReactWrapper.js:94:59)
at mount (node_modules/enzyme/build/mount.js:19:10)
at Context.<anonymous> (test/modules/dashboard/ProgramMeasureTrendsComponent.spec.js:53:25)
In my app this chart rendered properly without any error, but when I test it this error shown.
My guess is that the container div is not rendered when componentDidMount() called in enzyme testing process. Does Enzyme component lifecycle is diff than react lifecycle?
Thanks in advance
Aucun commentaire:
Enregistrer un commentaire