Question

我正在使用使用React创建的高图表组件。我必须为它编写一个测试，基础设施是Jasmine / Karma / React TestUtils。

我写了以下代码：

const component: React.Component<{}, {}> = TestUtils.renderIntoDocument(
            <EmailActivityBreakdown trendData={trendData}/>
        );

我一致地得到错误＃13 http://www.highcharts.com/errors/13（在“EmailActivityBreakdown”对象中实例化图表组件时）。

通常使用组件工作正常（即在非测试用例模式下）。如何使用ReactTest框架内的'renderTo'创建图表元素？

感谢。

Answer 1

此案例中的主要问题是Karma对getElementById的支持。 High Chart使用此类代码查找EmailActivityBreakdown id：

if (Fa(a)) this.renderTo = a = A.getElementById(a);

在Karma测试期间A.getElementById(a)返回null，这就是产生此错误的原因。目前，要在Karma中测试高级图表，您需要fixture。这是示例代码：

import React from 'react'
import TestUtils from 'react-addons-test-utils'

describe('(View) EmailActivityBreakdown', function () {

    beforeEach(function () {
        const fixture = '<div id="EmailActivityBreakdown"></div>'

        document.body.insertAdjacentHTML(
           'afterbegin',
           fixture)

        TestUtils.renderIntoDocument(<EmailActivityBreakdown 
            trendData={trendData}/>)
    })

    it('chart is rendered', function () {
       expect(document.getElementById('highcharts-0').innerHTML).to.exist
    })

})

HighChart Test React错误＃13

1 个答案: