jest-expo SyntaxError: Unexpected token, expected “;” (14:5)

I’m receiving the following error when trying to run a single test:

  ● Test suite failed to run

    SyntaxError: /Users/davevazquez/Documents/001-workspace/020-NutriJournal/rn-nutrition/node_modules/react-native/Libraries/polyfills/error-guard.js: Unexpected token, expected ";" (14:5)

      12 | let _inGuard = 0;
      13 | 
    > 14 | type ErrorHandler = (error: mixed, isFatal: boolean) => void;
         |      ^
      15 | type Fn<Args, Return> = (...Args) => Return;
      16 | 
      17 | /**

      at Parser._raise (node_modules/@babel/parser/lib/index.js:748:17)
      at Parser.raiseWithData (node_modules/@babel/parser/lib/index.js:741:17)
      at Parser.raise (node_modules/@babel/parser/lib/index.js:735:17)
      at Parser.unexpected (node_modules/@babel/parser/lib/index.js:9101:16)
      at Parser.semicolon (node_modules/@babel/parser/lib/index.js:9083:40)
      at Parser.parseExpressionStatement (node_modules/@babel/parser/lib/index.js:12216:10)
      at Parser.parseStatementContent (node_modules/@babel/parser/lib/index.js:11812:19)
      at Parser.parseStatement (node_modules/@babel/parser/lib/index.js:11676:17)
      at Parser.parseBlockOrModuleBlockBody (node_modules/@babel/parser/lib/index.js:12258:25)
      at Parser.parseBlockBody (node_modules/@babel/parser/lib/index.js:12249:10)

package.json

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "start:clear": "expo start -c",
    "android": "expo start --android",
    "android:reset-p": "adb shell pm reset-permissions",
    "ios": "expo start --ios",
    "build:ios": "expo build:ios",
    "build:android": "expo build:android",
    "web": "expo start --web",
    "eject": "expo eject",
    "lint": "eslint *.js **/*.js src/**/*.js",
    "lint:fix": "eslint --fix --ext *.js **/*.js src/**/*.js",
    "prettify": "prettier --write *.js **/*.js src/**/*.js",
    "test": "jest --verbose"
  },
  "dependencies": {
    "@expo-google-fonts/inter": "^0.1.0",
    "@hookform/resolvers": "^1.3.1",
    "@react-native-async-storage/async-storage": "^1.13.2",
    "@react-native-community/datetimepicker": "3.0.4",
    "@react-native-community/masked-view": "0.1.10",
    "axios": "^0.21.1",
    "date-fns": "^2.16.1",
    "dayjs": "^1.9.8",
    "expo": "~40.0.0",
    "expo-analytics-segment": "^9.1.0",
    "expo-app-loading": "^1.0.1",
    "expo-constants": "^9.3.5",
    "expo-font": "~8.4.0",
    "expo-linear-gradient": "^8.4.0",
    "expo-random": "^10.0.0",
    "expo-status-bar": "~1.0.3",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-hook-form": "^6.14.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
    "react-native-bouncing-preloader": "https://github.com/sonnylazuardi/react-native-bouncing-preloader",
    "react-native-elements": "^3.0.1",
    "react-native-gesture-handler": "~1.8.0",
    "react-native-keyboard-aware-scroll-view": "^0.9.3",
    "react-native-loading-spinner-overlay": "^2.0.0",
    "react-native-reanimated": "~1.13.0",
    "react-native-safe-area-context": "3.1.9",
    "react-native-screens": "~2.15.0",
    "react-native-svg": "12.1.0",
    "react-native-svg-charts": "^5.4.0",
    "react-native-web": "~0.13.12",
    "react-native-webview": "11.0.0",
    "react-navigation": "^4.4.3",
    "react-navigation-stack": "^2.10.2",
    "react-navigation-tabs": "^2.10.1",
    "vanilla-masker": "^1.2.0",
    "victory-native": "^35.3.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "@babel/types": "^7.12.12",
    "babel-eslint": "^10.1.0",
    "babel-plugin-module-resolver": "^4.1.0",
    "eslint": "^7.16.0",
    "eslint-config-prettier": "^7.1.0",
    "eslint-import-resolver-babel-module": "^5.2.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-prettier": "^3.3.0",
    "eslint-plugin-react": "^7.21.5",
    "eslint-plugin-react-hooks": "^4.2.0",
    "eslint-plugin-react-native": "^3.10.0",
    "jest-expo": "^40.0.1",
    "prettier": "^2.2.1",
    "react-test-renderer": "^17.0.1"
  },
  "private": true,
  "jest": {
    "preset": "jest-expo",
    "projects": [
      {
        "preset": "jest-expo/ios"
      },
      {
        "preset": "jest-expo/android"
      }
    ],
    "globals": {
      "__DEV__": true
    },
    "transformIgnorePatterns": [
      "node_modules/(?!(jest-)?!react-native|react-clone-referenced-element|@react-native-community|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|@sentry/.*)"
    ]
  }
}

.babelrc.js

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      [
        "babel-plugin-module-resolver",
        {
          root: ["./src"],
          alias: {
            _api: "./src/api",
            _hooks: "./src/hooks",
            _utils: "./src/utils",
            _assets: "./src/assets",
            _screens: "./src/screens",
            _contexts: "./src/contexts",
            _formrules: "./src/form-rules",
            _components: "./src/components",
            _globalstyles: "./src/global-styles.js",
            _NavigationService: "./src/NavigationService.js",
          },
        },
      ],
    ],
  };
};

I have scoured every possible forum I could find for how to resolve this issue with no luck. It looks like babel isn’t transpiling node_modules/react-native but that directory is included in my ignore pattern.

I’ve tried babel presets like @babel/preset-flow, multiple different transform patterns, jest configurations. Tried adding a transform property to jest config using node_modules/react-native/jest/preprocessor.js.

The closest thread I’ve found on stack-overflow related to this issue was here: https://stackoverflow.com/questions/60021119/how-can-i-stop-my-react-native-tests-bombing-out-on-flow-types-in-node-modules Although, nothing I could find in these answers were able to help.

Absolutely clueless on this. Would love any kind of direction. Thanks.

2 thoughts on “jest-expo SyntaxError: Unexpected token, expected “;” (14:5)

  1. Oh no, it’s because I’m using babelrc.js instead of babel.config.js.

    Closing this, hope it helps anyone who runs into the same issue.