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

[已编辑]：此问题的早期版本错误地将

echart

变量设置为

null

，而这是

getElementById

的结果。我通过从函数调用中删除

el

确认了这一点，测试的这一部分没有生成类似的错误，这意味着

echart

实际上是可用的

---

我正在使用CreateReact应用程序，它使用jest测试运行程序，我正在使用echarts

从“echart/lib/echart”导入echart；
//...
const el=document.getElementById（'the-chart'）；
this.chart=echarts.init（el）；
//...
//这里有很多不必要的背景
render（）{
const{classes}=this.props；
返回(
这个.handleClick（e）}>
);
}

当我在浏览器中加载页面时，此选项起作用。但是，当我运行测试时，在最后一行

TypeError: Cannot read property 'getAttribute' of null

文档返回的
el
值。getElementById

必须返回

null

，但只能在测试环境中返回。正在components

componentDidMount

回调中调用此代码

我怎样才能通过这次考试？是否有其他方法可以获取我应该在测试环境中等待的元素或其他事件，以便访问该元素？我在哪里可以找到为什么在测试和浏览器中这是不同的

---

我对node/npm、jest、Javascript还比较陌生，它们不是90年代的，我会做出反应，所以任何指向我没有正确思考的东西的指针都会非常感激

您能否显示“图表”元素呈现的代码？在react中，最好使用refs而不是getElementById，但我希望看到一些上下文更新，以添加

render（）

函数的相关部分！我将使用

React.createRef

来看看这是否可以实现。我不完全确定getElementById是否返回null，是吗？您是否使用quick console.log进行了检查？如果在componentdidmount中调用它，它应该可以工作。。六羟甲基三聚氰胺六甲醚。。。无论如何，尝试一下refs，然后使用

this.chart=echarts.init（this.myRef）

console.log确认它。使用

this.chartRef=React.createRef（）componentDidMount

函数中为

this.chartRef

获取

{current:null}

。因此它具有ref的结构，但仍然没有得到实际的DOM元素。同样地，它必须与测试运行程序有关，但我感到困惑。嗯，从我的一部分发现，使用

document.body.appendChild（div）附加创建的根元素可能会有所帮助，其中
div
作为测试代码的一部分创建。这让我更进一步——所讨论的行成功了，但随后发生了一个相关的错误，另一个“can't do xyz to
null
”错误。布莱格。我将进一步探讨这个错误，但至少它的进展！您能否显示“图表”元素呈现的代码？在react中，最好使用refs而不是getElementById，但我希望看到一些上下文更新，以添加
render（）
函数的相关部分！我将使用
React.createRef
来看看这是否可以实现。我不完全确定getElementById是否返回null，是吗？您是否使用quick console.log进行了检查？如果在componentdidmount中调用它，它应该可以工作。。六羟甲基三聚氰胺六甲醚。。。无论如何，尝试一下refs，然后使用
this.chart=echarts.init（this.myRef）
console.log确认它。使用
this.chartRef=React.createRef（）componentDidMount
函数中为
this.chartRef
获取
{current:null}
。因此它具有ref的结构，但仍然没有得到实际的DOM元素。同样地，它必须与测试运行程序有关，但我感到困惑。嗯，从我的一部分发现，使用
document.body.appendChild（div）附加创建的根元素可能会有所帮助，其中
div
作为测试代码的一部分创建。这让我更进一步——所讨论的行成功了，但随后发生了一个相关的错误，另一个“can't do xyz to
null
”错误。布莱格。我将进一步探讨这个错误，但至少它的进展！