Jest使用ES6模块报错：无法在模块外使用import语句

问题根源 #

jest.setup.js默认被Jest当作CommonJS模块解析，但你的项目是ESM配置（package.json含"type": "module"），同时MirageJS的导入用了ES模块语法，导致模块格式冲突报错。

具体解决步骤 #

• 重命名setup文件：把jest.setup.js改成jest.setup.mjs，让Node.js和Jest明确识别这是ES模块。
• 更新Jest配置：修改jest.config.ts，确保setup文件路径正确，同时完善ESM相关配置：

  export default {
    // 保留你原有的其他配置
    setupFilesAfterEnv: ['./jest.setup.mjs'],
    extensionsToTreatAsEsm: ['.ts', '.tsx'],
    transform: {
      '^.+\\.tsx?$': ['ts-jest', {
        useESM: true,
      }],
    },
    moduleNameMapper: {
      '^(\\.{1,2}/.*)\\.js$': '$1',
    },
  };
  

  其中moduleNameMapper是为了解决ESM项目中导入时带.js后缀的解析问题，避免Jest找不到对应文件。
• 修正MirageJS导入语法：在jest.setup.mjs中使用标准ES模块导入：

  import { createServer } from 'miragejs';
  
  function setupMirage() {
    createServer({
      // 你的MirageJS服务器配置
      routes() {
        // 示例路由
        this.namespace = 'api';
        this.get('/users', () => ({ users: [] }));
      },
    });
  }
  
  setupMirage();
  

• 检查测试脚本：确保package.json中的test脚本没有多余参数，保持简洁：

  {
    "scripts": {
      "test": "jest"
    }
  }
  

为什么之前的方法没生效？ #

你尝试的babel配置、启用Node实验性模块等方案，核心问题在于jest.setup.js没有被Jest当作ESM解析——即使项目整体是ESM，单个.js文件在Jest默认逻辑下仍会被当作CommonJS处理，导致import语法报错。通过重命名为.mjs，直接绕过了这个解析逻辑冲突。

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