Error running unit tests with Jest

Describe the Bug

When trying to run the unit tests with Jest using the imports from react-flow-renderer, some errors are occurring:

SyntaxError: Cannot use import statement outside a module

({"Object.anonymous>":function(module,exports,require,__dirname,__filename,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-5236d2af.js';

Test suite failed to run Jest encountered an unexpected token Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax. Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

I’m using the default example from the site, in a new application. This error is only happening when running with Jest.

In package.json used :

 "dependencies": {
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.4",
    "@testing-library/user-event": "^13.5.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-flow-renderer": "^10.0.6",
    "react-scripts": "5.0.0",
  },

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Install the lib in a project created using CRA
2. Copy some example of website usage
3. Create a unit test for the component
4. run the test

Expected behavior

Run unit tests successfully

Screenshots or Videos

No response

Platform

• OS: [Windows, Linux]
• Node: [16v]
• CRA v5

Additional context

No response

[JonasVargaski]

I managed to solve the jest problem, it’s working perfectly, including the mocks!

The solution:

Add jest-esm-transformer - this is a preset configuration of Babel to support ESM transpilation.

yarn add --dev jest-esm-transformer

Configure Jest.

// jest.config.js

module.exports = {
   "transformIgnorePatterns": [],
   "transform": {
     "\\.m?js?$": "jest-esm-transformer"
   },
};

Source: https://bl.ocks.org/rstacruz/511f43265de4939f6ca729a3df7b001c

[moklick]

We just released a new version (v10.1.0) with an UMD build that should work without any extra configuration.