Jest报错：Cannot use import statement outside a module及d.ts转换问题求助

问题场景 #

测试时触发语法错误，报错来自 react-bootstrap/esm/OverlayTrigger.js 中的 import 语句，提示无法在模块外使用 import；同时发现 Jest 无法转换 .d.ts 文件。

报错详情 #

/node_modules/react-bootstrap/esm/OverlayTrigger.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import _extends from "@babel/runtime/helpers/esm/extends";
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      1 | import classNames from 'classnames';
      2 | import React from 'react';
    > 3 | import OverlayTrigger from 'react-bootstrap/esm/OverlayTrigger';
        | ^

当前 Jest 配置 #

"transform": {
  "^.+\\.(ts|tsx|d.ts)$": "<rootDir>/node_modules/babel-jest",
  "^.+\\.svg$": "<rootDir>/svgTransform.js"
},
"transformIgnorePatterns": [
  "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx|d.ts)$",
  "^.+\\.(css|sass|scss)$"
]

核心问题分析 #

1. transformIgnorePatterns 过度排除：配置中把所有 node_modules 下的文件都排除在转换范围外，但 react-bootstrap 的 esm 模块用了 ES 模块语法，Jest 默认不处理这类未转换的代码，导致报错。
2. .d.ts 无需转换：类型声明文件本身不需要 babel-jest 转换，Jest 会自动识别处理类型文件，没必要把 .d.ts 加入转换规则。

具体修复步骤 #

1. 调整 transformIgnorePatterns，允许转换 react-bootstrap #

修改配置，让 Jest 不对 react-bootstrap 下的文件进行忽略，确保其 ES 模块代码能被 babel 转换：

"transformIgnorePatterns": [
  "[/\\\\]node_modules[/\\\\](?!react-bootstrap).+\\.(js|jsx|ts|tsx)$",
  "^.+\\.(css|sass|scss)$"
]

解释：(?!react-bootstrap) 是负向预查语法，表示不匹配包含 react-bootstrap 的路径，该路径下的文件会被纳入转换范围。

2. 移除 transform 规则中的 .d.ts #

删除转换规则里的 .d.ts 后缀，避免无效转换：

"transform": {
  "^.+\\.(ts|tsx)$": "<rootDir>/node_modules/babel-jest",
  "^.+\\.svg$": "<rootDir>/svgTransform.js"
}

3. 确认 Babel 配置支持 ES 模块转换 #

检查你的 .babelrc 或 babel.config.js，确保包含必要的预设，以支持 ES 模块和 React/TypeScript 转换：

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

4. 验证修复 #

重新运行 Jest 测试，确认报错消失，同时类型文件能被正确识别。

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