Тестирование Echarts реагирует компонент с шуткой, EchartElement является нулевым

Question

Выполнение теста моментальных снимков для компонента с несколькими вложенными дочерними компонентами, один из которых содержит диаграмму Echart (гистограмму).При рендеринге в браузере для EchartElement устанавливается элемент dom диаграммы:

 <div class="echarts-for-react " _echarts_instance_="ec_1551342959315" size-sensor-id="1" style="height: 360px; -webkit-tap-highlight-color: transparent; user-select: none; position: relative; background: transparent;">
...
</div>

Но при запуске теста его значение равно нулю, что делает его неудачным.Нужно ли как-то издеваться над этим?Не правильно звучит ... Все ожидаемые свойства передаются корректно и в тестовом режиме ... Я проверил ...

Есть ли какая-то конфигурация / настройка, которая мне нужна, чтобы Echarts работал с Jest?

Answer 1

Оказывается, что мой первый ответ не сработал для меня в конце ... Я продолжал тест и исправлял все, на что он жаловался, но всегда было что-то еще ...

Такс некоторой помощью коллеги решение состояло в том, чтобы остановить React Echarts для вызова Echarts путем насмешки над функцией, запускающей рендеринг.

let spy: any

beforeAll(() => {
    spy = jest.spyOn(echarts, 'getInstanceByDom').mockImplementation(() => {
        return {
            hideLoading: jest.fn(),
            setOption: jest.fn(),
            showLoading: jest.fn()
        }
    })
})
afterAll(() => {
    spy.mockRestore()
})
it('Renders show correctly', () => {
    const tree = renderer
        .create(
            <Show />
        )
        .toJSON()
    expect(tree).toMatchSnapshot()
})

В нашем случае мы не были заинтересованы в фактическом тестировании части рендеринга Canvas, поэтомуэто сработало для нас.

Answer 2

Да, мне нужно было смоделировать объект ref:

function createNodeMock(element: any) {
    return {
        getSomething: jest.fn(() => 'pizza'),
        setSomething: jest.fn(),
        property: null,
    }
}
it('Renders show correctly', () => {
    const options = { createNodeMock }
    const tree = renderer
        .create(
            <Show/>,
            options
        )
        .toJSON()
    expect(tree).toMatchSnapshot()
})

Каждый раз, когда я сталкивался с ошибкой при выполнении теста, я переходил туда, где вызывался метод или свойство, входил в консоль, смотрел, чтоЗначение было в то время как в браузере и установить данные в mockData.Может быть, есть лучший способ сделать это, но он сделал это ...