0

我正在尝试为 React 和 AmCharts4 运行 Jest 测试，但是我得到以下失败的测试：

console.log node_modules/@amcharts/amcharts4/.internal/core/System.js:481
      html container not found
    console.error node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/virtual-console.js:29
      Error: Uncaught [Error: html container not found]
          at reportException (../project/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:66:24)
          at invokeEventListeners (../project/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:209:9)
          at HTMLUnknownElementImpl._dispatch (../project/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:119:9)
          at HTMLUnknownElementImpl.dispatchEvent (../project/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17)
          at HTMLUnknownElementImpl.dispatchEvent (../project/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27)
          at HTMLUnknownElement.dispatchEvent (../project/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:21)
          at Object.invokeGuardedCallbackDev (../project/node_modules/react-dom/cjs/react-dom.development.js:199:16)
          at invokeGuardedCallback (../project/node_modules/react-dom/cjs/react-dom.development.js:256:31)
          at commitRoot (../project/node_modules/react-dom/cjs/react-dom.development.js:18948:7)
          at ../project/node_modules/react-dom/cjs/react-dom.development.js:20418:5 Error: html container not found
          at createChild (../project//node_modules/src/.internal/core/utils/Instance.ts:156:9)
          at Object.createFromConfig (../project//node_modules/src/.internal/core/utils/Instance.ts:311:14)
          at BaseChart.createFromConfig (../project//src/components/features/amCharts/BaseChart.js:17:25)
          at BaseChart.createChart [as componentDidMount] (../project//src/components/features/amCharts/BaseChart.js:14:10)
          at commitLifeCycles (../project//node_modules/react-dom/cjs/react-dom.development.js:17334:22)
          at commitAllLifeCycles (../project//node_modules/react-dom/cjs/react-dom.development.js:18736:7)
....

该图表在浏览器和故事书中呈现没有问题。

我就是不能让它通过测试。测试很简单：

import App from './App';

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<App />, div);
  ReactDOM.unmountComponentAtNode(div);
});

而我的BaseChart组件也很简单，只是将json图表配置映射到createFromConfig：

class BaseChart extends Component {
  componentDidMount() {
    this.createChart();
  }
  componentDidUpdate(oldProps) {
    if (JSON.stringify(oldProps.chartConfig) !== JSON.stringify(this.props.chartConfig)) {
      this.createChart();
    }
    if (JSON.stringify(oldProps.data) !== JSON.stringify(this.props.data)) {
      this.chart.data = this.props.data;
    }
  }
  componentWillUnmount() {
    if (this.chart) {
      this.chart.dispose();
    }
  }
  createChart = () => {
    let chart = am4core.createFromConfig(this.props.chartConfig, `amchart_${this.props.feature._id}`, this.props.chartModule);
    chart.data = this.props.data;
    this.chart = chart;
  }
  render() {
    const { feature, width, height } = this.props;
    return (
      <div id={`amchart_${feature._id}`} style={{ width: width ? width : '100%', height: height ? height : '300px' }}></div>
    );
  }
}

任何想法如何传递 html 容器未找到问题？

4

1 回答 1

1

您的 div 容器需要在文档中。

您正在为您的图表代码提供一个要渲染的 id。这个 div

<div id={'amchart_${feature._id}'} />

文档中不存在，因为组件不存在。该组件在文档中不存在，因为您创建并提供给渲染方法的容器不在文档中。

document.body.appendChild(div)
于 2019-05-05T17:19:23.230 回答