这是我的第一篇文章,长期潜伏。
我正在尝试为Highcharts编写一个针对React包装器组件(<Chart />
)的测试。是的,我知道高图表反应,但是我更喜欢使用自己的组件。该图表在componentDidMount()
中呈现,并且在尝试运行测试时遇到了常见的Highcharts错误#13。有人能建议用酶测试用componentDidMount()
渲染的组件的最佳方法吗?
我尝试显式调用wrapper.instance().componentDidMount()
,但遇到相同的错误。
chart.test.tsx
import * as React from 'react';
import { shallow } from 'enzyme';
import { Chart } from '../chart';
const chartData: Highcharts.Options = {
chart: {
type: 'bar'
},
plotOptions: {
bar: {
dataLabels: {
enabled: false
},
pointWidth: 12,
pointPadding: 0
},
series: {
borderWidth: 0
}
},
xAxis: {
categories: [0, 1, 2].map(String)
},
series: [{
name: 'Me',
data: [507, 831, 635, 1203, 728],
type: 'bar'
},
{
name: 'My Team',
data: [633, 656, 947, 908, 623],
type: 'bar'
},
{
name: 'Median',
data: [973, 914, 1054, 732, 834],
type: 'bar'
}]
};
describe('Chart', () => {
it('ComponentDidMount', () => {
const wrapper = shallow(
<Chart
id="my-chart"
config={chartData}
/>
);
wrapper.instance().componentDidMount();
expect(wrapper.find('.highcharts-container').length).toBe(1);
});
});
期望的结果是找到具有<Chart />
子元素的呈现的.highcharts-container
组件。预先感谢!