Jest encountered an unexpected token

[KrisLau]

🐛 Bug Report

I keep getting the "Jest encountered an unexpected token" and I've tried a bunch of the fixes recommended online including:

• adding transformIgnorePatterns to both of these:

  transformIgnorePatterns: [
      "node_modules/(?!(react-native"
        + "|react-navigation-tabs"
        + "|react-native-splash-screen"
        + "|react-native-screens"
        + "|react-native-reanimated"
      + ")/)",
    ],
  

      "transformIgnorePatterns": [
        "node_modules/(?!(jest-)?react-native|react-(native|universal|navigation)-(.*)|@react-native-community/(.*)|@react-navigation/(.*)|bs-platform|(@[a-zA-Z]+/)?(bs|reason|rescript)-(.*)+)"
      ]
  

• changing my package.json:

  "jest": {
     "preset": "react-native",
     "setupFiles": ["./node_modules/react-native-gesture-handler/jestSetup.js"]
   }
  

  AND

    "jest": {
      "preset": "react-native",
      "transform": {
        "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
      },
      "transformIgnorePatterns": [
        "/node_modules/(?!react-native|native-base-shoutem-theme|react-navigation-stack|@react-navigation|react-navigation-fluid-transitions)"
      ],
      "testPathIgnorePatterns": [
        "/node_modules/"
      ],
      "setupFiles": ["./node_modules/react-native-gesture-handler/jestSetup.js"]
    }
  

• Creating a .babelrc file in my root

  {
      "presets": [
        [
          "@babel/preset-env",
          {
            "useBuiltIns": "entry",
            "corejs": {"version": "3"}
          }
        ]
      ]
    }
  

• changing the modules option of Babel's ENV preset from false to auto.

  {
    "presets": [
      ["@babel/preset-env", { "modules": "auto" }]
    ]
  }
  

Actual error
> Prototype@0.0.1 test
> jest

 FAIL  __tests__/App-test.js
  ● Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

    Details:

    ...\node_modules\react-native-iphone-x-helper\index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import { Dimensions, Platform, StatusBar } from 'react-native';
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1479:14)
      at Object.<anonymous> (node_modules/@react-navigation/stack/lib/commonjs/TransitionConfigs/CardStyleInterpolators.tsx:2:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        1.48 s
Ran all test suites.

To Reproduce

I'm not sure what caused it as I haven't created any tests in jest yet. I know it was working about a month ago but that's about it. The test that is failing is the sample that is created when creating a bare react native app so I doubt that's the problem.

import 'react-native';
import React from 'react';
import App from '../App';

// Note: test renderer must be required after react-native.
import renderer from 'react-test-renderer';

it('renders correctly', () => {
  renderer.create(<App />);
});

My App.js

const App = () => (
  <AuthenticationContextProvider>
    <RootNavigator />
  </AuthenticationContextProvider>
);

Expected behavior

For the jest test to run succesfully

Link to repl or repo (highly encouraged)

N/A

envinfo

 System:
    OS: Windows 10 10.0.19042
    CPU: (4) x64 Intel(R) Core(TM) i5-6600 CPU @ 3.30GHz
  Binaries:
    Node: 14.16.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 7.13.0 - C:\Program Files\nodejs\npm.CMD
  npmPackages:
    jest: ^27.0.4 => 27.0.4

[EtheveDamien]

Same problem

[Fikir-2411]

@KrisLau did you find any solution to this?

[sigveio]

If you believe there is a bug in Jest, it would be helpful if someone could provide either a repl.it demo or a repository on GitHub with a minimal reproduction. What's provided so far is unfortunately a little bit too diffuse/incomplete.

See https://stackoverflow.com/help/minimal-reproducible-example for information on how to create good reproductions.

Here's also some useful resources if you have questions or need help;

• The Jest help page
• Our #testing channel in Reactiflux
• The jestjs tag on StackOverflow

[KrisLau]

@Fikir-2411 I actually ended up resolving the error but it was awhile back. I'm unsure which change actually fixed it but here is my jest config for reference

  "jest": {
    "preset": "react-native",
    "setupFiles": [
      "./node_modules/react-native-gesture-handler/jestSetup.js"
    ],
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ],
    "transformIgnorePatterns": [
      "node_modules/(?!react-native|react-navigation)/"
    ]
  }

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.