I am writing a jest test for a React component that contains a HotTable from react-handsontable. However, I am getting the error “TypeError: Cannot read property ‘insertBefore’ of null” when I render it in the test environment.
Specificially my stateless functional component is of the form:
import React from 'react'
import HotTable from 'react-handsontable'
const MyComponent = ({myDataJsonList, sizeJson}) => {
function getColumnWidths() {
return [0.25,0.25,0.50].map(x => x * size.width);
}
return (
<div className="MyTable">
<div className="MyTitle">Title Text</div>
<HotTable
root="hot"
settings={{
liscenseKey='my key here'
data: myDataJsonList,
colwidths: getColumnWidths(),
}}
/>
</div>
);
};
export default MyComponent;
My test looks like:
import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react-addons-test-utils';
import Wrap from '../src/views/Wrap'
import MyComponent from '../src/views/MyComponent'
describe('<MyComponent />', () => {
it('can haz title text', () => {
const myData = [{a:'1',b:'2',c'3'}];
const myComponent = TestUtils.renderIntoDocument(
<Wrap>
<MyComponent myDataJsonList={myData} sizeJson={{height:'300px',width:'300px'}} />
</Wrap>
);
const titleText = .findRenderedDOMComponentWithClass(myComponent , 'MyTitle').innerHTML;
expect(titleText).toEqual('Title Text')
});
});
In this test I am using the utitlity class Wrap that I would normally use to test stateless functional components:
import React from 'react';
class Wrap extends React.Component {
render() {
return <div>{this.props.children}</div>;
}
}
When I run the test (using npm run test), I get an error when calling TestUtils.renderIntoDocument:
TypeError: Cannot read property 'insertBefore' of null
at new Core (node_modules/handsontable/commonjs/core.js:148:14)
at new Handsontable (node_modules/handsontable/commonjs/index.js:202:18)
at HotTable.componentDidMount (node_modules/react-handsontable/dist/react-handsontable.js:171:26)
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:79:21)
at Object.<anonymous> (app/__tests__/MyComponent-test.js:91:80)
at emitTwo (events.js:106:13)
at process.emit (events.js:191:7)
at process.nextTick (internal/child_process.js:753:12)
at _combinedTickCallback (internal/process/next_tick.js:73:7)
at process._tickCallback (internal/process/next_tick.js:104:9)
What is the cause of this error? How do I solve this issue? Most importantly, how do I get my test to pass? I need to create tests for this component!