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

步骤1：修正Jest配置 #

打开你的jest.config.js，补充transformIgnorePatterns字段，同时优化transform的匹配规则：

module.exports = {
  preset: "ts-jest",
  testEnvironment: "jest-environment-jsdom",
  transform: {
    "^.+\\.(ts|tsx|js|jsx)$": "babel-jest",
  },
  transformIgnorePatterns: [
    "node_modules/(?!(graceful-fs|@firebase)/)"
  ],
  moduleNameMapper: {
    "^constants$": "<rootDir>/src/Constants/",
    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
      "<rootDir>/__mocks__/fileMock.js",
    "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js",
    "^modules(.*)$": "<rootDir>/src/Modules/",
    "^helper$": "<rootDir>/src/helper/",
    "^context$": "<rootDir>/src/Context/",
    "^route(.*)$": "<rootDir>/src/Routes/",
    "^assets(.*)$": "<rootDir>/src/Assets/",
    "^globalStyles(.*)$": "<rootDir>/src/GlobalStyles/",
    "^common(.*)$": "<rootDir>/src/Common/",
    "^hooks(.*)$": "<rootDir>/src/Hooks/",
    "^components(.*)$": "<rootDir>/src/Common/Components/",
  },
};

步骤2：修正Babel配置 #

打开babel.config.js，补充配置强制转译ES模块为CommonJS格式：

module.exports = {
  presets: [
    ["@babel/preset-env", { 
      targets: { node: "current" },
      modules: "commonjs"
    }],
    "@babel/preset-react",
  ],
  plugins: ["@babel/plugin-transform-modules-commonjs"]
};

步骤3：统一测试命令 #

打开package.json，修改test脚本避免react-scripts自带配置和自定义配置冲突：

{
  "scripts": {
    "start": "bash ./scripts/init.sh && react-scripts start",
    "build": "bash ./scripts/init.sh && react-scripts build",
    "test": "jest",
    "eject": "react-scripts eject"
  }
}

步骤4：重装依赖验证 #

删除本地依赖缓存后重新安装：

rm -rf node_modules package-lock.json yarn.lock
npm install

完成后执行npm run test即可正常运行测试。

内容的提问来源于stack exchange，提问作者md.warish Ansari