Cannot use import statement outside a module on 0.64.0

[maykonmichel]

Please provide all the information requested. Issues that do not follow this format are likely to stall.

Description

Please provide a clear and concise description of what the bug is. Include screenshots if needed.
Please test using the latest React Native release to make sure your issue has not already been fixed: https://reactnative.dev/docs/upgrading.html

React Native version:

Run react-native info in your terminal and copy the results here.

info Fetching system and libraries information...
System:
OS: macOS 11.2.3
CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
Memory: 686.00 MB / 16.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 12.18.3 - /usr/local/bin/node
Yarn: 1.22.5 - ~/.yarn/bin/yarn
npm: 6.14.8 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.10.1 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 14.4, DriverKit 20.2, macOS 11.1, tvOS 14.3, watchOS 7.2
Android SDK:
API Levels: 23, 28, 29, 30
Build Tools: 28.0.3, 29.0.2, 30.0.2
System Images: android-22 | Google APIs Intel x86 Atom, android-30 | Google Play Intel x86 Atom
Android NDK: Not Found
IDEs:
Android Studio: 4.1.3 4.1.3
Xcode: 12.4/12D4e - /usr/bin/xcodebuild
Languages:
Java: 1.8.0_272 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.1 => 17.0.1
react-native: 0.64.0 => 0.64.0
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1. run npx react-native init app --template react-native-template-typescript
2. run cd app
3. run yarn add react-native-vector-icons
4. create a file test.tsx and paste following:

import React from 'react';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {create} from 'react-test-renderer';

describe('Icon', () => {
  it('should render as expected', () => {
    const {toJSON} = create(<Icon name={'exit'} />);

    expect(toJSON()).toMatchSnapshot();
  });
});

5. run jest ./test.tsx

Expected Results

Describe what you expected to happen.

The test should pass without any problems as it used to happen on react-native 0.63.4.

Snack, code example, screenshot, or link to a repository:

Please provide a Snack (https://snack.expo.io/), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem.
You may provide a screenshot of the application if you think it is relevant to your bug report.
Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

What happens is actually the following error:

  FAIL  ./test.tsx
  ● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/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/en/configuration.html

    Details:

    /Users/maykonmichelpalma/Projects/GitHub/@kovver/kovver/node_modules/react-native-vector-icons/MaterialCommunityIcons.js:6
    import createIconSet from './lib/create-icon-set';
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      1 | import React from 'react';
    > 2 | import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
        | ^
      3 | import {create} from 'react-test-renderer';
      4 |
      5 | describe('Icon', () => {

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
      at Object.<anonymous> (test.tsx:2:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.736 s
Ran all test suites matching /.\/test.tsx/i.

[josmithua]

I am running into the same problem. I posted a similar issue here.

[monholm]

Facing the same issue. Getting SyntaxError: Cannot use import statement outside a module in tests that passed before upgrading to 0.64.

I take it that none of you found a workaround or cause for this?

[TommyLeong]

Same happened on my end for RN 0.64.0 ...

However I was unable to replicate this issue on a new RN 0.64.0 project

1. npx react-native init tempProj
2. npm test
3. Test PASS

Update 1.0: Managed to reproduce

Steps to reproduce are listed here microsoft/react-native-code-push#2050

[josmithua]

I got my project tests passing, please see the discussion here

[TommyLeong]

Glad that it work for your case, but not mine.. after appending the code (without the library i'm working with)

"transformIgnorePatterns": [
  "node_modules/(?!(react-native)/)"
]

Im getting another error from react-native itself.

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

    /maskedProjectPath/node_modules/@react-native/polyfills/error-guard.js:14
    type ErrorHandler = (error: mixed, isFatal: boolean) => void;
         ^^^^^^^^^^^^

    SyntaxError: Unexpected identifier

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
      at Object.<anonymous> (node_modules/react-native/jest/setup.js:439:6)

---

Update

Thanks @josmithua !

It works after appending the following @react-native infront

"transformIgnorePatterns": [
      "node_modules/(?!(@react-native|react-native|react-native-code-push)/)"
    ]

[josmithua]

Yes sorry, I forgot to comment that I also had to add @react-native to the pattern

[ls-andrew-goodale]

I believe this issue was introduced by the change to transformIgnorePatterns from this commit: a77f2c4
I worked around it by adding the following:

"transformIgnorePatterns": [
      "node_modules/(?!((jest-)?react-native(-.*)?|@react-native(-community)?)/)"
    ]

So that 3rd party libraries like react-native-webview and react-native-keyboard-aware-scroll-view would get processed by babel.

[lgmf-daitan]

Hello,

For me, the issue is still happening, actually if I don't use

  transform: {
    '^.+\\.(js|jsx)$': 'babel-jest',
  },

in my jest.config.js my tests don't even recognize the import React from 'react'.

My entire file looks like this

module.exports = {
  preset: 'react-native',
  setupFilesAfterEnv: ['@testing-library/jest-native/extend-expect'],
  transform: {
    '^.+\\.(js|jsx)$': 'babel-jest',
  },
  collectCoverageFrom: [
    '**/*.{js,jsx,ts,tsx}',
    '!**/node_modules/**',
    '!**/vendor/**',
    '!**/coverage/**',
  ],
};

I've tried adding

"transformIgnorePatterns": [
      "node_modules/(?!((jest-)?react-native(-.*)?|@react-native(-community)?)/)"
    ]

but from what I understood this configuration is overriding the "transform" one, so it go back to the problem with not solving the even the React import

Can somebody help me?

[Nithinkolipaka]

Hi Guys ,
I'm facing the same issue I have tried the methods mentioned above but I'm still facing the issue.
"jest": {
"preset": "react-native",
"transformIgnorePatterns": [
"node_modules/(?!((jest-)?react-native(-.*)?|@react-native(-community)?)/)"
]
}

[raimonkh]

I'm also in this boat after RN 65 update.
I have the pressets and the transforms but nothing makes the click.

[princefishthrower]

@raimonkh - same. Any luck? specifically, I'm seeing an issue when it tries to transform react-native-config... even after I explicitly say to ignore that package in my transformIgnorePatterns!

[raimonkh]

@princefishthrower I fixed this by adding to the transforms|@react-native|react-native

[Mubashirkhan]

i have added the following to my jest configuration

"transformIgnorePatterns": [
      "node_modules/(?!((jest-)?react-native(-.*)?|@react-native(-community)?)/)"
],

but still getting the following error

Test suite failed to run

    TypeError: __importDefault__(...).getConstants is not a function

      at Object.<anonymous> (node_modules/react-native/Libraries/Settings/Settings.ios.js:23:48)
      at Object.get Settings [as Settings] (node_modules/react-native/index.js:381:12)
      at Object.<anonymous> (node_modules/react-native-vector-icons/lib/react-native.js:1:574)

i have react-native version 0.66