SyntaxError: Cannot use import statement outside a module: when running Jest-expo tests

[teja-kandula]

🐛 Bug Report

Summary of Issue

Jest test case throwing the error -> SyntaxError: Cannot use import statement outside a module:

Environment - output of expo diagnostics & the platform(s) you're targeting

Android

Error :

({"Object.":function(module,exports,require,__dirname,__filename,global,jest){import connectStyle, { clearThemeCache } from "./src/connectStyle";
^^^^^^

SyntaxError: Cannot use import statement outside a module

Reproducible Demo

Please find the reproducible demo here: https://repl.it/@TejaGoud/Expo-Jest-test-case#LoginScreen.test.js
If any additional info needed please refer to this stack overflow question :
https://stackoverflow.com/questions/64771728/syntaxerror-cannot-use-import-statement-outside-a-module-when-running-jest-exp

Steps to Reproduce

1. Run yarn install
2. Run yarn test ( to replicate the test case)

Expected Behavior vs Actual Behavior

The test case shouldn't throw any import related errors.

[byCedric]

Hi @teja-kandula! It looks like native-base-shoutem-theme contains non-transpiled code, which is fine but not working in Jest. Jest uses babel to transpile the modules when used, so to fix this we have to extend the babel config just a bit. Over here you can see the standard transpile pattern Jest uses. You probably want to add all native-base-* or native-base-shoutem-* packages to this list. You can do that by configuring jest like:

// jest.config.js
module.exports = {
    setupFilesAfterEnv: [
      './setup-tests.js',
    ],
    "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/.*|native-base-*)",
    ],
    verbose : true
};

Hope this helps!

[teja-kandula]

Hi @byCedric! I have update transformIgnorePatterns as suggested but still I am getting the same error. Can you please advice on any alternative approaches as a fix.

[velnychukyuracv]

Hi! I have the same issue:
SyntaxError: Cannot use import statement outside a module

  1 | import React, { useEffect, useRef } from 'react';
> 2 | import { Animated, StyleSheet, View } from 'react-native';

package.json:

"jest": {
"preset": "jest-expo",
"transformIgnorePatterns": [
"node_modules/(?!(jest-expo-)?react-native|react-native|@react-native-community|expo(nent)?|@expo(nent)?/.|react-navigation|@react-navigation/.|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg)"
],
"moduleFileExtensions": [
"js",
"jsx",
"json",
"vue"
],
"transform": {
"^.+\.jsx?$": "babel-jest",
"^.+\.vue$": "vue-jest"
}
},

babel.config.js:
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
};
};

Can you please help me with it.