使用react-testing-library运行测试报Cannot use import statement outside a module错误如何解决

问题根因 #

该报错是 Next.js + Jest + TypeScript 技术栈下，JSX 导入逻辑与 Jest 的 CommonJS 模块编译规则冲突导致：默认配置下 Babel 会给包含 JSX 的测试文件自动注入 import React from "react" 语句，而你的项目缺少对应的 ES 模块转译配置，同时 Babel 预设加载顺序存在冲突。

修复步骤 #

1. 调整 jest.config.ts 配置，补充 Next.js 测试适配规则：

import type { JestConfigWithTsJest } from 'ts-jest'

const jestConfig: JestConfigWithTsJest = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  clearMocks: true,
  collectCoverage: true,
  coverageDirectory: "coverage",
  coverageProvider: "v8",
  // 对react-testing-library相关依赖做ES模块转译
  transformIgnorePatterns: [
    '/node_modules/(?!(@testing-library)/)'
  ],
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node']
}

export default jestConfig

如果还没安装对应依赖，先执行安装：npm i -D @testing-library/jest-dom jest-environment-jsdom ts-jest

2. 调整 babel.config.js 配置，解决预设冲突并开启 JSX 自动导入：
   原配置重复添加的 @babel/preset-env、@babel/preset-typescript 与 next/babel 内置预设冲突，修改为如下配置即可：

module.exports = {
  presets: [
    ['next/babel', {
      'preset-react': {
        runtime: 'automatic'
      }
    }]
  ]
};

开启 runtime: 'automatic' 后，Babel 不会再给 JSX 文件自动注入冗余的 import React from "react" 语句，从根源避免报错。

3. （可选）根目录新增 jest.setup.ts 文件，全局注入测试工具匹配器：

import '@testing-library/jest-dom'

修改完成后重新执行测试命令即可正常运行。

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