Testing Echarts react component with jest, EchartElement is null - reactjs

Question

Doing a snapchot test of a component with several nested children components, one which holds a Echart (bar-chart). When rendering in browser, EchartElement is set to the chart dom element:
<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>
But running the test, its null, which makes the test fail. Do I need to mock this somehow? Doesn't sound right...All the properties it is expecting are passed in correctly also in test mode...I checked...
Is there some configuration/setup I need to make Echarts work with Jest?

Answer 1

Turns out that my first answer didn't work for me at the end... I kept running the test and fixing whatever it was complaining about, but there was always something else...
So with some help from a colleague, the solution was to stop React Echarts to call Echarts by mocking the function triggering the rendering.
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()
})
In our case we were not interested in actually testing the canvas rendering part, so that worked for us.

Answer 2

Yes, I had to mock the ref object:
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()
})
Every time I ran into an error running the test, I went to where the method or property was called, console logged, looked what the value was while in the browser and set the data in the mockData. Maybe there is a better way of doing this, but it got it done...