HighChart 测试反应错误#13答案

【问题标题】：HighChart Test React error#13HighChart 测试反应错误#13
【发布时间】：2015-12-30 15:32:27
【问题描述】：

我正在使用使用 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”的图表元素才能工作？

谢谢。

【问题讨论】：

标签： highcharts reactjs-testutils

【解决方案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
    })

})

【讨论】：