Question

我正在为一个包含来自react-handsontable的HotTable的React组件编写一个jest测试。但是，当我在测试环境中呈现它时，我收到错误“TypeError：无法读取属性'insertBefore'的null”。

具体来说，我的无状态功能组件的形式如下：

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;

我的测试看起来像：

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')
  });
});

在这个测试中，我使用的是通常用于测试无状态功能组件的utitlity类Wrap：

import React from 'react';
class Wrap extends React.Component {
  render() {
    return <div>{this.props.children}</div>;
  }
}

当我运行测试时（使用npm run test），我在调用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)
  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)

此错误的原因是什么？我该如何解决这个问题？最重要的是，我如何让我的测试通过？

React handsonable test render issue- typeerror：无法读取null的属性'insertbefore'

0 个答案: