HighChart Test React error#13

Question

Я использую компонент High Chart, созданный с помощью React. Я должен написать тест для него, а инфраструктура - Jasmine / Karma / React TestUtils.

Я написал следующий код:

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

Я постоянно получаю сообщение об ошибке № 13 http://www.highcharts.com/errors/13 (при создании экземпляра компонента диаграммы внутри объекта "EmailActivityBreakdown").

Вещи работают нормально с компонентом (то есть в режиме без тестового случая). Как я могу создать элемент диаграммы с renderTo внутри фреймворка ReactTest для работы?

Благодарю.

Answer 1

Основной проблемой в этом случае является поддержка Кармы getElementById, High Chart использует такой код, чтобы найти идентификатор EmailActivityBreakdown:

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

Во время теста кармы A.getElementById(a) возврате null вот почему эта ошибка выдается. В настоящее время для тестирования 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
    })

})