1

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.

enter image description here

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.

xzegga
  • 3,051
  • 3
  • 25
  • 45

0 Answers0