I am using a combination of vitest as test runnert, js-dom as dom matcher and @testing-libraries to create react component unit test.
After change from jest to vitest, I start getting an error on every component that has Echarts included.
I open the latest file in the stack and it contains this line:
width = platformApi.measureText(text, font).width;
I have installed vitest-canvas-mock
to add support for canvas to vitest and this is my test config in vite.config file:
test: {
globals: true,
setupFiles: ['./src/setupTests.ts'],
environment: 'jsdom',
deps: {
inline: ['vitest-canvas-mock'],
},
// For this config, check https://github.com/vitest-dev/vitest/issues/740
threads: false,
environmentOptions: {
jsdom: {
resources: 'usable',
},
},
},
Also I am rendering the component in a wrapper that has width and height specified as an addition to set directly width and height to Echarts reference.
<ReactECharts
ref={chart}
opts={{ renderer: 'svg', width, height }}
option={optionsChart}
></ReactECharts>
Someone know what is the problem here, I solve this issue before in jest with jest-canvas-mock but after migrate to vite I can't get them work.