测试套件运行失败：node_modules/@react-native/polyfills/error-guard.js：缺少分号

Question

我四处寻找这个错误，发现很多人都报告了这个错误，但尝试过的解决方案都不适合我。我正在处理的项目在安装了react-native v0.63的情况下被从expo中弹出，然后升级到react-native v0.64.3。其他一切都工作正常，但测试失败。运行时yarn test，所有单元测试都会抛出相同的错误：

\n

 src/screens/ScreenTest/ScreenTest.test.js\n  \xe2\x97\x8f Test suite failed to run\n\n    SyntaxError: /node_modules/@react-native/polyfills/error-guard.js: Missing semicolon. (14:4)\n\n      12 | let _inGuard = 0;\n      13 |\n    > 14 | type ErrorHandler = (error: mixed, isFatal: boolean) => void;\n         |     ^\n      15 | type Fn<Args, Return> = (...Args) => Return;\n      16 |\n      17 | /**\n\n      at instantiate (node_modules/@babel/parser/lib/index.js:72:32)\n      at constructor (node_modules/@babel/parser/lib/index.js:367:12)\n      at Parser.raise (node_modules/@babel/parser/lib/index.js:3706:19)\n      at Parser.semicolon (node_modules/@babel/parser/lib/index.js:4151:10)\n      at Parser.parseExpressionStatement (node_modules/@babel/parser/lib/index.js:15453:10)\n      at Parser.parseStatementContent (node_modules/@babel/parser/lib/index.js:14986:19)\n      at Parser.parseStatement (node_modules/@babel/parser/lib/index.js:14838:17)\n      at Parser.parseBlockOrModuleBlockBody (node_modules/@babel/parser/lib/index.js:15495:25)\n      at Parser.parseBlockBody (node_modules/@babel/parser/lib/index.js:15486:10)\n      at Parser.parseProgram (node_modules/@babel/parser/lib/index.js:14748:10)\n      at Parser.parseTopLevel (node_modules/@babel/parser/lib/index.js:14735:25)\n      at Parser.parse (node_modules/@babel/parser/lib/index.js:16764:10)\n      at parse (node_modules/@babel/parser/lib/index.js:16816:38)\n          at parser.next (<anonymous>)\n          at normalizeFile.next (<anonymous>)\n          at run.next (<anonymous>)\n          at transform.next (<anonymous>)\n      at evaluateSync (node_modules/gensync/index.js:251:28)\n      at sync (node_modules/gensync/index.js:89:14)\n      at ScriptTransformer.transformSource (node_modules/@jest/transform/build/ScriptTransformer.js:481:35)\n      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:586:40)\n      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:624:25)\n      at Object.<anonymous> (node_modules/react-native/jest/setup.js:300:6)\n

\n

另一件需要注意的事情是，我babel.config.js的项目中已经有了文件，因为很多答案都提到从.babelrc到 来babel.config.js作为此问题的解决方案，但它没有帮助。为了确保我也尝试删除babel.config.js并添加 a.babelrc但这也不起作用。

\n

我在这里束手无策，非常感谢任何帮助！

\n

到目前为止我已经尝试过：

\n

\n
• 将 jest、babel 和任何依赖项升级/降级到新版本
\n
• 如何阻止我的 React Native 测试在节点模块中的流类型上爆炸？=> 在此线程中发布的修复
\n
• https://github.com/react-native-community/upgrade-support/issues/152 => 此问题的更多修复
\n
• 更改 babel 插件并添加/删除transformIgnorePatterns
\n
• 创建一个新的、裸的react-native@0.64.3项目并运行默认测试（将babel降级到推荐版本后测试通过）
\n

\n

babel.config.js：

\n

module.exports = function (api) {\n  api.cache(false)\n  return {\n    env: {\n      production: {\n        presets: [\'module:metro-react-native-babel-preset\'],\n        plugins: [\n          \'module:react-native-dotenv\',\n          \'react-native-reanimated/plugin\',\n          \'transform-remove-console\',\n        ],\n      },\n      development: {\n        presets: [\'module:metro-react-native-babel-preset\'],\n        plugins: [\'module:react-native-dotenv\', \'react-native-reanimated/plugin\'],\n      },\n    },\n  }\n}\n

\n

包.json：

\n

{\n  "dependencies": {\n    "@expo/vector-icons": "^12.0.0",\n    "@gorhom/bottom-sheet": "^4.4.2",\n    "@pnthach95/react-native-root-view-background": "^1.2.0",\n    "@ptomasroos/react-native-multi-slider": "^2.2.2",\n    "@react-native-async-storage/async-storage": "^1.13.4",\n    "@react-native-community/clipboard": "^1.5.1",\n    "@react-native-community/netinfo": "^8.3.0",\n    "@react-native-community/push-notification-ios": "^1.8.0",\n    "@react-native-firebase/analytics": "12.9.3",\n    "@react-native-firebase/app": "12.9.3",\n    "@react-native-firebase/auth": "^12.1.0",\n    "@react-native-firebase/crashlytics": "12.9.3",\n    "@react-native-firebase/dynamic-links": "10.8.1",\n    "@react-native-firebase/in-app-messaging": "12.9.3",\n    "@react-native-firebase/messaging": "^12.1.0",\n    "@react-native-firebase/perf": "12.9.3",\n    "@react-native-firebase/remote-config": "12.9.3",\n    "@react-native-google-signin/google-signin": "^6.0.1",\n    "@react-native-masked-view/masked-view": "^0.2.6",\n    "@react-native-picker/picker": "1.9.2",\n    "@react-navigation/bottom-tabs": "^6.4.0",\n    "@react-navigation/core": "^5.16.1",\n    "@react-navigation/native": "^6.0.13",\n    "@react-navigation/native-stack": "^6.9.6",\n    "@react-navigation/stack": "^6.3.1",\n    "@rematch/core": "^2.0.0",\n    "@rematch/loading": "^2.0.0",\n    "@sentry/react-native": "^2.6.2",\n    "@twotalltotems/react-native-otp-input": "^1.3.11",\n    "accordion-collapse-react-native": "^0.3.2",\n    "axios": "^0.20.0",\n    "babel-eslint": "^10.1.0",\n    "babel-plugin-inline-dotenv": "^1.6.0",\n    "babel-plugin-transform-remove-console": "^6.9.4",\n    "eslint-plugin-react-native": "^3.11.0",\n    "eslint-plugin-unused-imports": "^1.1.1",\n    "expo": "^40.0.0",\n    "expo-document-picker": "~8.4.1",\n    "expo-file-system": "~9.3.0",\n    "expo-location": "~10.0.0",\n    "expo-splash-screen": "~0.8.1",\n    "expo-status-bar": "~1.0.3",\n    "expo-web-browser": "~8.6.0",\n    "firebase": "^8.4.3",\n    "intl": "^1.2.5",\n    "lodash": "^4.17.20",\n    "lottie-ios": "3.4.0",\n    "lottie-react-native": "^5.1.4",\n    "moment": "^2.29.1",\n    "moment-duration-format": "^2.3.2",\n    "patch-package": "^6.4.7",\n    "postinstall-postinstall": "^2.1.0",\n    "prop-types": "^15.7.2",\n    "radio-buttons-react-native": "^1.0.4",\n    "react": "17.0.2",\n    "react-calendly": "^4.0.0",\n    "react-dom": "16.13.1",\n    "react-intl": "^5.24.6",\n    "react-native": "0.64.3",\n    "react-native-appsflyer": "6.8.2",\n    "react-native-background-timer": "^2.4.1",\n    "react-native-bootsplash": "^3.2.2",\n    "react-native-code-push": "^7.0.4",\n    "react-native-confirmation-code-field": "^6.5.1",\n    "react-native-date-picker": "^3.2.8",\n    "react-native-device-info": "^8.0.0",\n    "react-native-dotenv": "^2.5.0",\n    "react-native-fast-image": "^8.5.11",\n    "react-native-fbsdk-next": "^4.2.0",\n    "react-native-fingerprint-scanner": "^6.0.0",\n    "react-native-fs": "^2.18.0",\n    "react-native-gesture-handler": "^1.10.3",\n    "react-native-image-header-scroll-view": "^0.10.3",\n    "react-native-image-picker": "~4.2.1",\n    "react-native-in-app-review": "^4.1.1",\n    "react-native-inappbrowser-reborn": "^3.5.1",\n    "react-native-indicators": "^0.17.0",\n    "react-native-insta-story": "^1.1.8",\n    "react-native-keyboard-aware-scroll-view": "^0.9.2",\n    "react-native-linear-gradient": "^2.6.2",\n    "react-native-modal": "^13.0.0",\n    "react-native-offline": "^6.0.0",\n    "react-native-otp-autocomplete": "^1.0.7",\n    "react-native-pager-view": "5.4.12",\n    "react-native-paper": "^4.2.0",\n    "react-native-permissions": "^3.0.0",\n    "react-native-picker-select": "^8.0.0",\n    "react-native-play-install-referrer": "^1.1.8",\n    "react-native-popup-menu": "^0.15.11",\n    "react-native-portal": "^1.3.0",\n    "react-native-progress": "^4.1.2",\n    "react-native-push-notification": "7.3.1",\n    "react-native-quiz-maker": "^0.1.0",\n    "react-native-raw-bottom-sheet": "^2.2.0",\n    "react-native-razorpay": "^2.2.7",\n    "react-native-reanimated": "~2.5.0",\n    "react-native-responsive-fontsize": "^0.5.1",\n    "react-native-restart": "^0.0.22",\n    "react-native-rss-parser": "https://github.com/adityabishtedu/react-native-rss-parser/tarball/rss-patch",\n    "react-native-safe-area-context": "3.4.1",\n    "react-native-screens": "^3.17.0",\n    "react-native-session-stats": "https://github.com/balazsherczeg/react-native-session-stats.git",\n    "react-native-shadow-2": "^6.0.5",\n    "react-native-share": "^7.9.0",\n    "react-native-signature-canvas": "^4.3.0",\n    "react-native-simple-toast": "^1.1.3",\n    "react-native-skeleton-placeholder": "^5.0.0",\n    "react-native-snap-carousel": "4.0.0-beta.6",\n    "react-native-step-indicator": "^1.0.3",\n    "react-native-steps": "^1.3.0",\n    "react-native-svg": "^12.1.1",\n    "react-native-tab-view": "^3.1.1",\n    "react-native-tab-view-fixed": "^0.0.69",\n    "react-native-thumbnail-video": "^0.1.2",\n    "react-native-tracking-transparency": "^0.1.1",\n    "react-native-ultimate-config": "3.4.2",\n    "react-native-unimodules": "~0.12.0",\n    "react-native-vector-icons": "^9.1.0",\n    "react-native-video": "^5.1.1",\n    "react-native-view-shot": "^3.4.0",\n    "react-native-walkthrough-tooltip": "^1.1.11",\n    "react-native-web": "~0.13.12",\n    "react-native-webp-format": "^1.1.2",\n    "react-native-webview": "^11.18.1",\n    "react-native-youtube-iframe": "^2.2.2",\n    "react-navigation": "^4.4.4",\n    "react-number-format": "^4.4.1",\n    "react-redux": "^7.2.1",\n    "redux": "^4.0.5",\n    "redux-axios-middleware": "^4.0.1",\n    "redux-thunk": "^2.3.0",\n    "rn-faded-scrollview": "^1.0.12",\n    "rn-fetch-blob": "^0.12.0",\n    "validate.js": "^0.13.1",\n    "victory-native": "^36.6.0",\n    "volkeno-react-native-quiz-multiple-choice": "^1.0.3"\n  },\n  "devDependencies": {\n    "@babel/core": "^7.20.5",\n    "@babel/runtime": "^7.20.6",\n    "@babel/preset-typescript": "^7.16.5",\n    "@commitlint/cli": "^17.0.3",\n    "@commitlint/config-conventional": "^17.0.3",\n    "babel-jest": "~26.6.3",\n    "babel-loader": "^8.2.2",\n    "babel-plugin-transform-flow-strip-types": "^6.22.0",\n    "babel-preset-expo": "8.3.0",\n    "commitizen": "^4.2.4",\n    "cz-conventional-changelog": "3.3.0",\n    "eslint": "^7.32.0",\n    "eslint-config-airbnb": "^18.2.1",\n    "eslint-config-prettier": "^8.3.0",\n    "eslint-plugin-import": "^2.24.2",\n    "eslint-plugin-jsx-a11y": "^6.4.1",\n    "eslint-plugin-react": "^7.26.0",\n    "husky": "^8.0.0",\n    "jest": "~26.6.3",\n    "metro-react-native-babel-preset": "^0.73.4",\n    "prettier": "^2.4.1",\n    "react-native-bundle-visualizer": "^2.2.1",\n    "react-test-renderer": "17.0.1"\n  },\n  "jest": {\n    "preset": "react-native"\n  }\n}\n

\n

Answer 1

不幸的是，我遇到了同样的问题，所以我偶然发现了你的问题。几个小时后我找到了问题和解决方案。

就我而言，当我将 jest 从 27 升级到 28 ( https://jestjs.io/docs/28.x/upgrading-to-jest28 ) 时，由于以下更改，问题发生了：

巴别塔配置

babel-jest 现在在解析配置时将 root: config.rootDir 传递给 Babel。这提高了使用具有不同配置的项目时的兼容性，但这可能意味着您的 babel 配置不再以相同的方式获取。您可以通过在配置中将选项传递给 babel-jest 来覆盖此选项。

我的babel.config.js位于我的反应本机应用程序根目录中.\babel.config.js，但我的.\jest.config.js文件定义为根目录（用于搜索测试）：rootDir: "src". 从 27 更改为 28 后，babel.config.js不再找到该文件，因为 babel-jest 进行了搜索./src/babel.config.js，因此发生了与上面描述的完全相同的错误：

语法错误：/node_modules/@react-native/polyfills/error-guard.js：缺少分号。(14:4) 因为 babel 不再转译该error-guard.js文件。

由于您仍然有 jest 26 （在您的 package.json 中），您的情况可能会有所不同 - 但问题是您的 babel.config.js 文件未找到或不再找到，因此 babel-jest 不再转译任何文件。

不确定这是否对您有帮助 - 我使用了以下解决方案：

1. ./babel-jest.js使用内容创建一个新文件

module.exports = require("babel-jest").createTransformer({
  rootMode: "upward",
})

2. 像这样引用这个.\jest.config.js：

transform: {
    "^.+\\.jsx?$": "../babel-jest.js",
},

现在，不再babel-jest直接调用新的转换器，.\src\..\babe-jest.js而是包含向上搜索babel.config.js文件的选项（然后最终在.\babel.config.js上面一层找到它）。

该解决方案也在这里描述： Babel：根编程选项 和这里 https://github.com/facebook/jest/issues/8006

还有其他建议可以使用：

transform: {
    '^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { rootMode: 'upward' }],
  },

在 https://github.com/facebook/jest/issues/8006 甚至在笑话页面上它本身 https://jestjs.io/docs/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object 但不幸的是这是不为我工作。

您可以尝试另一种选择（https://github.com/facebook/jest/issues/8006中也有描述）。

您可以babel.config.js在根目录中创建一个文件用于测试并通过以下方式引用原始文件

module.exports = require('../babel.config.js');

希望这个对你有帮助。