HighChart Test React error#13

Question

I am using a High Chart component created using React. I have to write a test for it, and the infrastructure is Jasmine/Karma/React TestUtils.

I have written the following code:

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

I am consistenly getting Error#13 http://www.highcharts.com/errors/13 (when instantiating the chart component inside the "EmailActivityBreakdown" object).

Things work fine generally with the component, (i.e. in non-test case mode). How can I create the chart element with a 'renderTo' inside the ReactTest framework to work?

Thanks.

score 1 · Answer 1 · answered Sep 23 '16 at 23:35

Main problem in this case is Karma support for getElementById. High Chart use such code to find EmailActivityBreakdown id:

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

During Karma test A.getElementById(a) returning null that's why this error is produced. Currently to test High Chart in Karma you will need fixture. This is example code:

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 error#13

1 Answers1