1

我正在使用使用 React 创建的 High Chart 组件。我得为它写一个测试，基础设施是Jasmine/Karma/React TestUtils。

我写了以下代码：

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

我一直收到 Error#13 http://www.highcharts.com/errors/13（在“EmailActivityBreakdown”对象中实例化图表组件时）。

组件通常可以正常工作（即在非测试用例模式下）。如何在 ReactTest 框架内创建带有“renderTo”的图表元素才能工作？

谢谢。

4

1 回答 1

1

这种情况下的主要问题是 Karma 对getElementById. High Chart 使用这样的代码来查找 EmailActivityBreakdown id：

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

在 Karma 测试A.getElementById(a)返回期间null，这就是产生此错误的原因。目前要在 Karma 中测试 High Chart，您将需要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
    })

})
于 2016-09-23T23:35:41.210 回答