Vite迁移后Jest测试报错：Cannot use import statement outside a module

你的问题核心是内部UI库的组件代码使用了ES模块语法（如import），但Jest没有对该库进行转译，导致运行测试时抛出语法错误。以下是针对性的修复方案：

1. 将内部UI库加入Jest转译白名单 #

默认情况下，Jest会跳过node_modules目录下文件的转译。如果你的内部UI库是发布在node_modules中的私有包，需要修改jest.config.js的transformIgnorePatterns，把UI库排除在忽略列表外：

transformIgnorePatterns: [
  '/node_modules/(?!d3|d3-array|internmap|delaunator|robust-predicates|@your-ui-library-name)',
],

替换@your-ui-library-name为你的UI库实际包名；如果是本地目录（如src/ui），则无需此步骤，但要确保moduleDirectories包含该目录

2. 扩展ES模块处理的文件类型 #

当前extensionsToTreatAsEsm只包含.ts，需要补充UI库可能用到的.js、.jsx类型，确保Jest正确识别这些文件为ES模块：

extensionsToTreatAsEsm: ['.ts', '.tsx', '.js', '.jsx'],

3. 强化Babel对JSX的转译配置 #

你的.babelrc已包含@babel/preset-react，显式设置runtime: 'automatic'可确保它正确转译react/jsx-runtime的导入：

{
  "presets": [
    ["@babel/preset-env", { "targets": { "node": "current" } }],
    "@babel/preset-typescript",
    ["@babel/preset-react", { "runtime": "automatic" }]
  ],
  // ...其他插件
}

4. 针对本地UI库源码的转译配置 #

如果你的UI库是本地未编译的源码（而非发布的包），直接让Jest转译该目录：
在jest.config.js的transform中添加UI库目录的匹配规则：

transform: {
  '^.+\\.(js|jsx)$': 'babel-jest',
  '^.+\\.(ts|tsx)$': 'ts-jest',
  '^src/ui/.+\\.(js|jsx|ts|tsx)$': 'babel-jest', // 替换为你的UI库本地路径
},

完成以上调整后，重新运行Jest测试，即可解决Cannot use import statement outside a module的错误。

内容的提问来源于stack exchange，提问作者Monkey D. Teach