Unable to run Jest test - Cannot use import statement outside a module

[qweluke]

With latest v5.1.0 I am unable to run Jet tests.

    /Volumes/workdata/projects/fr/front/node_modules/@fullcalendar/react/dist/main.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { __assign, __extends } from "tslib";
                                                                                             ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      2 | import OverlayLoader from './OverlayLoader';
      3 | import PropTypes from 'prop-types';
    > 4 | import FullCalendar from '@fullcalendar/react';
        | ^
      5 | import dayGridPlugin from '@fullcalendar/daygrid';
      6 | import listPlugin from '@fullcalendar/list';
      7 | import moment from 'moment';

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
      at Object.<anonymous> (src/components/RescuesSchedule.jsx:4:1)

I am using react-scripts (without ejecting). Is there any solution to get rid of this error?

[arshaw]

my explanation on this comment addresses this: #5467 (comment)

[qweluke]

I've ended up with mocking fullcalendar like this

jest.mock('@fullcalendar/react', () => () => <div />);
jest.mock('@fullcalendar/daygrid', () => jest.fn());
jest.mock('@fullcalendar/list', () => jest.fn());

Note that this will prevent fullcalendar from being rendered but test should be working fine - ofc if you don't need to test FC

or even better, you can mock fullcalendar and it's API

jest.mock('@fullcalendar/react', () => {
  const React = require('react');
  class FullCalendar extends React.Component {
    getApi = () => ({
      view: {
        activeStart: '20202020',
      },
    });
    render = () => React.createElement('div');
  }
  return FullCalendar;
});
jest.mock('@fullcalendar/daygrid', () => jest.fn());
jest.mock('@fullcalendar/list', () => jest.fn());

[marcobeltempo]

Without mocking you can use transformIgnorePatterns to transpile fullcalendar

// jest.config.js
module.exports = {
    transform: {
        '^.+\\.[t|j]sx?$': 'babel-jest'
    },
    moduleNameMapper: {
        '\\.(css|less|sass|scss)$': 'identity-obj-proxy',
    },
    transformIgnorePatterns: [
        '/node_modules/(?!@fullcalendar/*).+\\.[t|j]sx?$'
    ],
};

[baileyandy]

I used the solution from @marcobeltempo but I also had to switch from .babelrc to babel.config.js since my project is using Babel 7 (see jestjs/jest#7578 (comment))

[Aerophite]

I started getting this after upgrading to jest v28 (from v26). None of the solutions in here worked for me...but I was able to get it to work using a solution from preactjs/enzyme-adapter-preact-pure#179 (comment)

TL;DR
Add this to your jest config

moduleNameMapper: {
    "^preact(/(.*)|$)": "preact$1",
},