使用Jest与Remix执行测试时遇Unexpected Token错误求助

安全阿岳

2026-6-19

问题解决：Remix Jest测试中出现"Cannot use import statement outside a module"错误

问题根源

报错来自@web3-storage/multipart-parser依赖，该包采用ES模块（ESM）格式，但Jest默认会忽略node_modules目录下的文件转译，导致无法识别ESM的import语法。

解决方案

1. 配置Jest转译特定依赖包

修改你的Jest配置文件（jest.config.js），添加transformIgnorePatterns规则，让Jest对@web3-storage/multipart-parser进行转译：

/** @type {import('jest').Config} */
module.exports = {
  testEnvironment: "jsdom",
  transform: {
    "^.+\\.(ts|tsx)$": "babel-jest",
  },
  // 排除node_modules中除了指定包之外的文件，让Babel转译该包
  transformIgnorePatterns: [
    "/node_modules/(?!@web3-storage/multipart-parser)",
  ],
  moduleFileExtensions: ["ts", "tsx", "js", "jsx"],
};

2. 确保Babel配置正确

创建或修改babel.config.json，添加必要的预设以支持React、TypeScript和ES转译：

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "@babel/preset-typescript"
  ]
}

3. 安装必要的Babel依赖

如果还未安装相关Babel包，执行以下命令：

npm install --save-dev babel-jest @babel/preset-env @babel/preset-react @babel/preset-typescript

备选方案：启用Jest的ESM模式

如果更倾向于使用原生ESM，可调整package.json：

{
  "type": "module",
  "jest": {
    "testEnvironment": "jsdom",
    "extensionsToTreatAsEsm": [".ts", ".tsx"],
    "moduleNameMapper": {
      "^(\\.{1,2}/.*)\\.js$": "$1"
    },
    "transform": {}
  }
}

注意：此方案需要你将测试文件中的导入路径添加.js后缀（比如import Component from './Component.js'），且部分Jest插件可能存在兼容性问题。