Jest: SyntaxError: Cannot use import statement outside a module

Created on 1 Jun 2020 · 11Comments · Source: facebook/jest

🐛 Bug Report

I followed this and reported this issue here, however got this response:
This is entirely related to your jest config, and has nothing to do with enzyme. Please file it with jest.

Running yarn test:

arn run v1.22.4
$ jest
 FAIL  __tests__/component.enzyme.test.js
  ● 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:
     • 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/kasra/Documents/JestEnzyme/node_modules/react-native/index.js:13
    import typeof AccessibilityInfo from './Libraries/Components/AccessibilityInfo/AccessibilityInfo';
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module

    > 1 | import 'react-native';
        | ^
      2 | import 'jest-enzyme';
      3 | import Adapter from 'enzyme-adapter-react-16';
      4 | import Enzyme from 'enzyme';

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1257:14)
      at Object.<anonymous> (setup-tests.js:1:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        1.886 s
Ran all test suites.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

To Reproduce

git clone https://gitlab.com/ghasemikasra39/latestrn.git
cd latestrn
yarn install
yarn test

Steps to reproduce the behavior:

Expected behavior

I added this simple test:

/**
 * @jest-environment jsdom
 */
import React from 'react';
import {mount} from 'enzyme';
import {Text} from 'react-native';

describe('Component tested with airbnb enzyme', () => {
  test('App mount with enzyme', () => {
    const wrapper = mount(<Text />);
    // other tests operations
  });
});

Should not get that error.

Link to repl or repo (highly encouraged)

https://gitlab.com/ghasemikasra39/latestrn

envinfo

  System:
    OS: macOS 10.15.3
    CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
  Binaries:
    Node: 12.13.1 - ~/.nvm/versions/node/v12.13.1/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.12.1 - ~/.nvm/versions/node/v12.13.1/bin/npm
  npmPackages:
    jest: ^26.0.1 => 26.0.1

Bug Report Needs Repro Needs Triage

Source

ghasemikasra39

👍6

All 11 comments

Same issue. Any solution ?

cool-debug on 1 Jun 2020

Try adding preset: "react-native" to your Jest config.
And follow this guide to set it up to work with react native.

grosto on 7 Jun 2020

👍1

Dear @grosto
Have you checked the setup-tests.js in the repo I shared?

ghasemikasra39 on 8 Jun 2020

I see that it's as guide says it should be. but you are still missing preset: 'react-native' in your jest.config.js

grosto on 8 Jun 2020

@grosto is right, you need to use the preset or provide some other base configuration with mocks and transforms adjusted.

thymikee on 9 Jun 2020

Dear @grosto
jest.config.js

module.exports = {
  preset: 'react-native',
  collectCoverage: true,
  moduleDirectories: ['node_modules', 'src'],
  transform: {
    '^.+\\.js$': '<rootDir>/node_modules/react-native/jest/preprocessor.js',
  },
  setupFiles: ['<rootDir>setup-tests.js'],
  transformIgnorePatterns: ['node_modules/(?!(jest-)?react-native)'],
  coveragePathIgnorePatterns: ['/node_modules/', '/jest'],
  testEnvironment: 'jsdom',
};

setup-tests.js

import 'react-native';
import 'jest-enzyme';
import Adapter from 'enzyme-adapter-react-16';
import Enzyme from 'enzyme';

/**
 * Set up DOM in node.js environment for Enzyme to mount to
 */
const {JSDOM} = require('jsdom');

const jsdom = new JSDOM('<!doctype html><html><body></body></html>');
const {window} = jsdom;

function copyProps(src, target) {
  Object.defineProperties(target, {
    ...Object.getOwnPropertyDescriptors(src),
    ...Object.getOwnPropertyDescriptors(target),
  });
}

global.window = window;
global.document = window.document;
global.navigator = {
  userAgent: 'node.js',
};
copyProps(window, global);

/**
 * Set up Enzyme to mount to DOM, simulate events,
 * and inspect the DOM in tests.
 */
Enzyme.configure({adapter: new Adapter()});

Am I correct ?

ghasemikasra39 on 9 Jun 2020

Are you able to resolve this issue?