迁移至Vitest后React组件中ECharts测试报错问题求助

以下是几个可能的原因及对应的解决办法：

1. Vitest配置中vitest-canvas-mock加载顺序错误 #

Vitest的setup文件执行逻辑和Jest不同，必须确保canvas mock在ECharts模块加载前生效。修改vitest.config.ts，将vitest-canvas-mock加入setupFiles数组的最前面：

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    environment: 'jsdom',
    setupFiles: ['vitest-canvas-mock'], // 确保mock优先加载
    globals: true
  }
});

2. vitest-canvas-mock未完全覆盖ECharts所需的measureText方法 #

部分场景下，该mock库对measureText的实现无法满足ECharts的调用逻辑，需手动补充mock：
在测试的setup文件（比如tests/setup.ts）中添加：

// 为Canvas元素补充measureText方法
Object.defineProperty(HTMLCanvasElement.prototype, 'measureText', {
  value: (text: string) => ({ width: text.length * 7 }), // 可根据测试需求调整宽度计算逻辑
});

// 或者直接mock ECharts的platformApi
import * as echarts from 'echarts';
echarts.setPlatformAPI({
  ...echarts.getPlatformAPI(),
  measureText: (text: string) => ({ width: text.length * 7 })
});

3. ReactECharts的SVG渲染器配置未生效 #

即使指定了renderer="svg"，测试环境下ECharts可能仍默认使用canvas渲染。需在测试中强制锁定渲染模式：

// 测试组件时明确传入renderer属性
render(<ReactECharts option={chartOption} style={{ width: 400, height: 300 }} renderer="svg" />);

4. Vitest的JS DOM环境资源配置缺失 #

JS DOM默认可能限制了Canvas相关资源的加载，需在配置中开启资源可用性：

export default defineConfig({
  test: {
    environment: 'jsdom',
    environmentOptions: {
      jsdom: {
        resources: 'usable' // 允许加载Canvas等资源
      }
    }
  }
});

5. 依赖版本兼容性问题 #

检查vitest、vitest-canvas-mock、jsdom的版本是否匹配。如果是版本不兼容导致的mock失效，尝试升级vitest-canvas-mock到最新版，或临时降级Vitest至与mock库兼容的版本。

内容的提问来源于stack exchange，提问作者xzegga