got Highcharts error #13 when running unit test - reactjs

Question

The highcharts render fine in browser without error, but when running test on the component, I got test failing:
● renders correctly
Highcharts error #13: www.highcharts.com/errors/13
22 |
23 | highChartsRender(options) {
> 24 | Highcharts.chart(this.props.id,{
| ^
25 | chart: {
26 | type: "line",
27 | renderTo: "lineChart",
and in my HCLineChart.test.js file, I have this:
it('renders correctly', () => {
const tree = TestRenderer
.create(<HCLineChart title={title} options={options} id={"LineChart1"} />)
.toJSON();
expect(tree).toMatchSnapshot();
});
and then in my HCLineChart.js file, I have this:
import React from "react";
import Highcharts from "highcharts";
import HC_exporting from "highcharts/modules/exporting";
import HC_exporting_data from "highcharts/modules/export-data";
import PropTypes from "prop-types";
class HCLineChart extends React.Component {
constructor(props){
super(props);
HC_exporting(Highcharts);
HC_exporting_data(Highcharts);
}
componentDidMount() {
this.highChartsRender(this.props.options);
}
shouldComponentUpdate(nextProps) {
this.highChartsRender(nextProps.options);
return false;
}
highChartsRender(options) {
Highcharts.chart(this.props.id,{
chart: {
type: "line",
renderTo: "lineChart",
height: 500,
},
title: {
text: this.props.title,
},
xAxis: {
categories: options.xAxisCategories,
},
yAxis: {
title: {
text: this.props.title,
},
},
plotOptions: {
series: {
marker: {
enabled: false,
},
},
},
credits:{
enabled: false,
},
exporting: {
buttons: {
contextButton: {
enabled: true,
menuItems: [
"printChart",
"downloadCSV",
"downloadXLS",
],
},
},
},
series: options.data,
});
Highcharts.setOptions({
lang: {
thousandsSep: ",",
},
});
}
render() {
return <div className="line-chart" id={this.props.id} />;
}
}
export default HCLineChart;
So why I got the error only in testing? I saw the div already there before calling the Highchart.chart ?
Thank you.
Lei