Jest结合@testing-library/react测试时dom-accessibility-api的mjs报错求助

你遇到的Cannot use import statement outside a module报错，本质是两处Jest配置的逻辑矛盾：

• 你当前的transformIgnorePatterns规则，会把所有node_modules目录下的.mjs/.js/.ts类文件，全部排除在语法转译流程之外，Jest拿到原始源码直接运行。
• 这次触发报错的dom-accessibility-api是@testing-library/react的间接依赖，它的产物里带原生ES Module格式的.mjs文件，刚好落在你的忽略规则覆盖范围内。
• Jest 26版本默认运行在CommonJS模块规范下，碰到原生import语法根本没法解析，就直接抛错了。

那些公开教程里没提这个问题，是因为大家大多用Create React App的内置Jest配置，已经内置了针对这类node_modules内ESM依赖的转译豁免规则，你这套自定义配置没有做这层适配，才会碰到这个问题。

1. 调整transformIgnorePatterns的豁免规则 #

把原来“全量忽略node_modules转译”的逻辑，改成“大部分node_modules还是忽略，唯独dom-accessibility-api需要纳入转译流程”，把jest.config.js里的对应配置改成：

transformIgnorePatterns: [
  // 正则含义：匹配node_modules路径下、不包含dom-accessibility-api的相关后缀文件，才执行忽略转译
  "[/\\\\]node_modules[/\\\\](?!(dom-accessibility-api)/).+\\.(js|jsx|mjs|ts|tsx)$"
],

这里不用把整个node_modules的忽略规则删掉，不然会大幅拖慢测试启动速度，还可能引入第三方依赖源码的转译兼容问题。

2. 修正mjs文件的转译管道 #

你现在的transform配置里，把所有.mjs后缀的文件都丢给ts-jest处理了，但dom-accessibility-api的mjs文件是纯JavaScript写的，不需要走TypeScript转译，很容易出现转译配置不匹配的问题。
把jest.config.js里的transform块改成：

transform: {
  // 普通js、jsx、mjs文件统一交给babel-jest转译
  "^.+\\.(js|jsx|mjs)$": "babel-jest",
  // ts、tsx文件才交给ts-jest处理
  "^.+\\.(ts|tsx)$": "ts-jest",
  "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
  "^(?!.*\\.(js|jsx|mjs|css|json|ts)$)": "<rootDir>/config/jest/fileTransform.js"
},

3. 确认babel的转译目标 #

你的babel.config.js现在只挂载了react-app预设，需要明确告诉babel把ESM语法转成CommonJS格式，不要输出原生import语句：

const presets = [    
  ["react-app", {
    targets: {
      // 按照当前运行Jest的Node版本做语法适配，关闭ESM输出
      node: 'current'
    }
  }]
];
module.exports = { presets };

后续如果升级testing-library版本，大概率还会有其他依赖用ESM格式发布，可以把豁免名单扩开，把同属testing-library生态的、容易出mjs文件的包都加进去，避免重复踩坑：

// 正则里的豁免部分可以扩展成
(?!(dom-accessibility-api|@testing-library|pretty-format)/)

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