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

🐛 Bug Report

Summary of Issue

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

Updated the transformIgnorePatterns as told in the last ticket but it is throwing the same error. #10996

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

This is to reopen a closed issue. https://github.com/expo/expo/issues/10996

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.

[theetrain]

Thanks for your suggestion. Importing the preset turned out to be part of the solution, but a few more things were needed. Things behaved correctly when we did the following:

1. Manually import the expo presets we needed, and then and add our own baseConfig
2. Set up a special babel config just for jest, without using the conventional babel.config.js filename in order to avoid conflicts with Expo and NextJS in our project
3. Install necessary babel dependencies. Our package.json includes the following:

{
  "devDependencies": {
    "@babel/core": "^7.12.13",
    "@babel/plugin-proposal-class-properties": "^7.12.13",
    "@babel/plugin-transform-runtime": "^7.12.15",
    "@babel/preset-env": "^7.12.13",
    "babel-jest": "^26.6.3",
    "jest-expo": "^40.0.2",
    "react-test-renderer": "^17.0.1"
  }
}

After setup, we now have a working project using *.jsx component and test files.

I think there’s an opportunity for this preset-importing tip to be added to Expo’s Jest documentation.

🎁 For those following this thread, here are copies of our working jest and special babel configs:

jest.config.js and babel-jest.config.js

jest.config.js

const iOS = require('jest-expo/ios/jest-preset')
const android = require('jest-expo/android/jest-preset')

const baseConfig = {
  transform: {
    '\\.[jt]sx?$': ['babel-jest', { configFile: './babel-jest.config.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/.*)'
  ],
  testPathIgnorePatterns: [
    '<rootDir>/.next/',
    '<rootDir>/node_modules/',
    '<rootDir>/cypress/' // only needed if you use cypress
  ]
}

module.exports = {
  projects: [
    {
      ...iOS,
      ...baseConfig
    },
    {
      ...android,
      ...baseConfig
    },
    {
      displayName: 'Web',
      preset: 'react-native-web',
      // This is brittle, we did this so snapshot naming/modifying is consistent
      snapshotResolver: 'jest-expo/src/snapshot/resolver.web.js',
      ...baseConfig
    }
  ],
}

babel-jest.config.js (referenced only in jest.config.js)

module.exports = function babelJestConfig (api) {
  api.cache(true)
  return {
    presets: ['@babel/preset-env', 'babel-preset-expo', '@expo/next-adapter/babel'],
    plugins: [
      '@babel/plugin-transform-runtime',
      '@babel/plugin-proposal-class-properties'
    ]
  }
}

Hat tip to @marcod1419 for figuring this out. 👏

[brentvatne]

Though jest handles the processing of jest.config.js, where is that ingested within jest-expo, if at all? I’ve observed that a file jest-preset.js creates a base configuration, but it doesn’t seem to be merging with any user-defined configs.

I suspect that the behavior that you are seeing is due to some quirk in the way jest handles merging configs - we don’t ingest the developer’s jest config in jest-expo, that’s all handled by jest.

You can merge configs yourself though because it’s a js file, and then you get more control. Something like this should work:

const jestExpoPreset = require('jest-expo/jest-preset');

module.exports = {
  ...jestExpoPreset,
  transform: {
    '\\.[jt]sx?$': 'babel-jest'
  },
  transformIgnorePatterns: [
    ...jestExpoPreset.transformIgnorePatterns,
    'some-other-lib',
  ]
}