Jest encountered unexpected token or SyntaxError: Cannot use import statement outside a module

Describe the Bug

I have issue when running simple test on my App component. It appeared when I added ReactFlow to the project, take a look on received error:

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/xxx/xxx/node_modules/react-flow-renderer/dist/esm/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { _ as _slicedToArray, a as _defineProperty, P as Position, C as ConnectionMode, g as getHostForElement, u as useStoreApi, b as useStore, c as addEdge, d as getMarkerId, r as rectToBox, e as getConnectedEdges, f as getDimensions, h as PanOnScrollMode, i as clamp, j as getNodesInside, k as getSelectionChanges, l as getRectOfNodes, m as ConnectionLineType, M as MarkerType, n as isNumeric, o as Provider$1, p as createStore, q as applyEdgeChanges, s as applyNodeChanges } from './index-fdcea71e.js';
                                                                                             ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      1 | import React, { useRef, Suspense, useCallback, useMemo } from "react";
    > 2 | import ReactFlow, {
        | ^
      3 |   Background,
      4 |   Controls,
      5 |   ControlButton,
      
      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Add ReactFlow to your app and run npm t

Expected behavior

Tests passes without errors

Screenshots or Videos

No response

Platform

• OS: [macOS]

Additional context

No response

[moklick]

@lisandro-jofre We will add a CJS build again. This isn’t a good experience at all.

[lisandro-jofre]

I’m afraid I tried all of the solutions described on https://github.com/wbkd/react-flow/issues/2019, https://github.com/wbkd/react-flow/issues/2020 and here, but none of them worked for me. I think going back to CJS would be ideal since ESM on Jest is still experimental and looks like people are having issues with it.