Svelte+Vite项目集成Jest时加载babel.config报错求助

问题根源 #

Jest默认以CommonJS模式加载配置文件，而你的babel.config.js可能是ESM格式（使用import/export），或者package.json中设置了"type": "module"，导致Babel配置被识别为原生ESM，但Jest的Babel同步加载逻辑不支持这种格式——这也是为什么Rollup下能正常运行（Rollup对ESM配置兼容性更好）。

具体解决办法 #

办法1：将Babel配置转为CommonJS格式

把babel.config.js里的ESM语法替换为CommonJS语法：

// 原ESM格式示例
// import { presetEnv } from '@babel/preset-env';
// export default { presets: [presetEnv] };

// 修改后的CommonJS格式
const { presetEnv } = require('@babel/preset-env');
module.exports = { presets: [presetEnv] };

办法2：保留ESM格式的Babel配置

如果需要继续使用ESM格式，需调整Jest和Babel的配置：

1. 将babel.config.js重命名为babel.config.mjs（明确标记为ESM模块）
2. 在jest.config.js中指定异步加载Babel配置：

module.exports = {
  transform: {
    '^.+\\.svelte$': ['svelte-jester', { preprocess: true }],
    '^.+\\.js$': ['babel-jest', { configFile: './babel.config.mjs' }]
  },
  // 其他Jest配置项...
};

3. 若package.json中存在"type": "module"，需在测试命令中添加Node.js ESM支持参数：

"scripts": {
  "test": "NODE_OPTIONS=--experimental-vm-modules jest"
}

办法3：调整package.json的模块类型设置

如果项目不需要全局启用ESM，直接移除package.json中的"type": "module"字段；若必须保留该字段，将babel.config.js重命名为babel.config.cjs（明确标记为CommonJS模块），让Jest能正常加载。

验证 #

修改完成后，运行npm test或yarn test，检查报错是否消失。

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