升级Vite 4.3后使用amcharts4运行测试出现两类报错求助

问题场景 #

升级Vite到4.3版本后，运行单元测试时遇到@amcharts/amcharts4的依赖处理冲突：

• 把@amcharts/amcharts4加入test.deps.inline时，触发TypeError: Class extends value undefined is not a constructor or null，错误根源是tslib的__extends方法处理Modal类继承时找不到父类。
• 移除deps.inline配置后，又出现SyntaxError: Cannot use import statement outside a module，因为amcharts4内部文件用了ES模块语法但没被正确转译。

解决方案 #

1. 调整依赖内联范围 #

不要内联整个@amcharts/amcharts4，只内联它依赖的tslib，同时配置Vitest转译amcharts4的文件：
修改vite.config.ts的test配置：

test: {
  setupFiles: ['vuetify.config.js', 'tests/unit/setup.ts'],
  globals: true,
  environment: 'jsdom',
  deps: {
    inline: ['vuetify', 'tslib'], // 仅内联tslib
  },
  transformMode: {
    web: [/\.[jt]sx?$/], // 确保amcharts4的js/ts文件被转译
  },
  snapshotFormat: {
    escapeString: false,
    printBasicPrototype: true,
  },
}

2. 强制转译@amcharts/amcharts4包 #

如果上面的配置没用，添加test.server.deps.transformInclude强制转译：

test: {
  // ...其他原有配置
  server: {
    deps: {
      transformInclude: [
        /@amcharts\/amcharts4/, // 强制转译amcharts4所有文件
      ],
    },
  },
}

3. 升级amcharts4版本 #

检查当前@amcharts/amcharts4版本是否太旧，建议升级到最新稳定版：

npm update @amcharts/amcharts4

4. 测试环境mock（可选临时方案） #

如果前面的方法都不行，直接在测试setup文件里mock amcharts4模块，避免加载真实依赖：
在tests/unit/setup.ts中添加：

vi.mock('@amcharts/amcharts4', () => ({
  // 根据你的测试需求mock必要的类和方法
  create: vi.fn(() => ({})),
  Modal: vi.fn().mockImplementation(() => ({
    // 模拟需要的属性和方法
  })),
}));

问题根源 #

• 内联整个amcharts4时，Vite的依赖预构建打乱了内部模块加载顺序，导致父类还没加载就被继承，触发Class extends value undefined错误。
• 不内联时，amcharts4的ES模块语法没被转译，在CommonJS环境下执行报错。

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