Question

[编辑]：该问题的早期版本错误地将echarts变量设为null，而该变量是getElementById的结果。我通过从函数调用中删除el来确认这一点，并且测试的那一部分没有产生类似的错误，表明echarts实际上可用。

我正在使用create-react-app，该应用程序使用了开玩笑的测试运行程序，并且正在使用echarts。

import echarts from 'echarts/lib/echarts';

//...

    const el = document.getElementById('the-chart');
    this.chart = echarts.init(el);

//...

// lots of unecessary context ...'d out here:
  render() {
    const { classes } = this.props;
    return (
      <div className={...}>
        <div className={...}><!-- ... --></div>
        <div className={classes.metricsGraph} onClick={(e) => this.handleClick(e)}>
          <div id="the-chart" style={{width: "600px",height: "400px"}}></div>
        </div>
        <div className={...}><!-- ... --></div>
      </div>
    );
  }

当我在浏览器中加载页面时，此方法有效。但是，当我运行测试时，我在最后一行得到了

TypeError: Cannot read property 'getAttribute' of null

由el返回的document.getElementById的值必须返回null，但仅在测试环境中。在组件componentDidMount回调中调用此代码。

如何继续通过此考试？是否有另一种获取元素或其他事件的方法，我应该在测试环境中等待该元素的访问？我在哪里可以发现为什么测试版和浏览器版之间的差异？

我对node / npm，开玩笑，不是90年代的Java脚本和React还是比较陌生，因此，凡是指向我未正确考虑的事物的指针，将不胜感激！

运行测试时，按id的元素为null（无法读取null的'getAttribute'属性）

0 个答案: