html 未找到容器 - AmCharts4、React 和 Jest 测试

Question

我正在尝试运行对 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)
....

图表在浏览器和 Storybook 中呈现没有问题。

我只是无法让它通过测试。测试很简单：

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 找不到容器的问题有什么想法吗？

Answer 1

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

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

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

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

document.body.appendChild(div)

html 未找到容器 - AmCharts4、React 和 Jest 测试

html container not found - AmCharts4, React and Jest Testing

amcharts

reactjs

jestjs

amcharts4