Expo项目运行Jest测试时无法识别.jsx文件该如何解决？

步骤1：安装缺失的Babel相关依赖 #

你之前仅在配置中声明了@babel/preset-react和@babel/plugin-syntax-jsx，但未实际安装到开发依赖中，执行以下命令安装：

npm install --save-dev @babel/preset-react @babel/plugin-syntax-jsx

同时你项目中安装的babel-preset-react-native已经废弃，会和babel-preset-expo产生冲突，建议卸载：

npm uninstall --save-dev babel-preset-react-native

步骤2：修正babel.config.js配置 #

给@babel/preset-react添加适配React 17+的自动运行时配置，避免需要手动在每个JSX文件导入React：

module.exports = function (api) {
  api.cache(true);
  return {
    presets: [
      'babel-preset-expo',
      ['@babel/preset-react', { runtime: 'automatic' }]
    ],
    plugins: ['@babel/plugin-syntax-jsx']
  };
};

步骤3：补充Jest转换规则 #

在package.json的jest配置块中添加transform配置，指定用babel-jest处理JS/JSX文件：

{
  "jest": {
    "preset": "jest-expo",
    "transform": {
      "^.+\\.(js|jsx)$": "babel-jest"
    },
    "transformIgnorePatterns": [
      "node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg)"
    ],
    "collectCoverage": true,
    "collectCoverageFrom": [
      "**/*.{js,jsx}",
      "!**/coverage/**",
      "!**/node_modules/**",
      "!**/babel.config.js",
      "!**/jest.setup.js"
    ]
  }
}

步骤4：清理缓存重新运行测试 #

先清理Jest缓存避免旧缓存影响：

npx jest --clearCache

再执行测试命令：

npm test

如果仍然提示找不到@babel/core，删除项目根目录的node_modules文件夹、package-lock.json或yarn.lock文件后重新执行npm install即可解决。

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