测试在componentDidMount()

时间:2019-01-17 17:06:21

标签: reactjs typescript highcharts enzyme

这是我的第一篇文章,长期潜伏。

我正在尝试为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组件。预先感谢!

0 个答案:

没有答案