Im getting this error out of nowhere.

Code works fine in while im using it, but during testing with Jest this pops up. ......................................................................................................................................................................................................................................................................................................................................................................................................................

Details:

    C:\node_modules\react-leaflet\lib\index.js
:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export { us
eMap, useMapEvent, useMapEvents } from './hooks.js';
                                                                                      ^^^^^^     

    SyntaxError: Unexpected token 'export'

       9 | } from 'react-leaflet';
      10 | import { private } from 'private';
    > 11 |
         | ^

This is my jest config

module.exports = {
  moduleNameMapper: {
    // Resolve .css and similar files to identity-obj-proxy instead.
    '.+\\.(css|styl|less|sass|scss)$': 'identity-obj-proxy',
    // Resolve .jpg and similar files to __mocks__/file-mock.js
    '.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '<rootDir>/__mocks__/file-mock.js',
  },

  clearMocks: true,

  coverageDirectory: 'coverage',
  // In jest.config.js add (if you haven't already)
  setupFilesAfterEnv: ['./src/setupTests.js'],

  coverageProvider: 'v8',

  globals: {
    'ts-jest': {
      isolatedModules: true,
    },
  },

  rootDir: '.',
  moduleDirectories: ['node_modules', 'src', 'utils'],
  testEnvironment: 'jsdom',
  testTimeout: 20000,

  roots: ['<rootDir>/src'],
  testMatch: [
    '**/__tests__/**/*.+(ts|tsx|js)',
    '**/?(*.)+(spec|test).+(ts|tsx|js)',
  ],
  transform: {
    '^.+\\.js?$': 'babel-jest',
    '^.+\\.(t|j)sx?$': ['@swc/jest'],
  },
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
  transformIgnorePatterns: [`/node_modules/(?!${esModules}')`],
};

TsConfig

  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
  ],
  "exclude": [
    "node_modules",
    "dist"
  ],
  "pilerOptions": {
    "target": "es2015",
    "module": "esnext",
    "declaration": true,
    "lib": [
      "es2021",
      "es2017",
      "es2015",
      "dom",
      "ESNext"
    ],
 
    "allowJs": false,
    "jsx": "react-jsx",
    "sourceMap": true,
    "outDir": "dist",
    "rootDir": "src",
    "removeComments": true,
    "strict": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "isolatedModules": true,
    "noEmit": true,
    "baseUrl": "src",
    "paths": {
      "test-utils": [
        "./utils/test-utils"
      ]
    }
  }
}

.Bablerc & config

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

module.exports = {
  presets: [
    [
      '@parcel/babel-preset-env',
      {
        targets: {
          esmodules: true,
        },
      },
    ],
  ],
};

Is there something that could be causing this or am I missing something else?

Im getting this error out of nowhere.

Code works fine in while im using it, but during testing with Jest this pops up. ......................................................................................................................................................................................................................................................................................................................................................................................................................

Details:

    C:\node_modules\react-leaflet\lib\index.js
:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export { us
eMap, useMapEvent, useMapEvents } from './hooks.js';
                                                                                      ^^^^^^     

    SyntaxError: Unexpected token 'export'

       9 | } from 'react-leaflet';
      10 | import { private } from 'private';
    > 11 |
         | ^

This is my jest config

module.exports = {
  moduleNameMapper: {
    // Resolve .css and similar files to identity-obj-proxy instead.
    '.+\\.(css|styl|less|sass|scss)$': 'identity-obj-proxy',
    // Resolve .jpg and similar files to __mocks__/file-mock.js
    '.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '<rootDir>/__mocks__/file-mock.js',
  },

  clearMocks: true,

  coverageDirectory: 'coverage',
  // In jest.config.js add (if you haven't already)
  setupFilesAfterEnv: ['./src/setupTests.js'],

  coverageProvider: 'v8',

  globals: {
    'ts-jest': {
      isolatedModules: true,
    },
  },

  rootDir: '.',
  moduleDirectories: ['node_modules', 'src', 'utils'],
  testEnvironment: 'jsdom',
  testTimeout: 20000,

  roots: ['<rootDir>/src'],
  testMatch: [
    '**/__tests__/**/*.+(ts|tsx|js)',
    '**/?(*.)+(spec|test).+(ts|tsx|js)',
  ],
  transform: {
    '^.+\\.js?$': 'babel-jest',
    '^.+\\.(t|j)sx?$': ['@swc/jest'],
  },
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
  transformIgnorePatterns: [`/node_modules/(?!${esModules}')`],
};

TsConfig

  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
  ],
  "exclude": [
    "node_modules",
    "dist"
  ],
  "pilerOptions": {
    "target": "es2015",
    "module": "esnext",
    "declaration": true,
    "lib": [
      "es2021",
      "es2017",
      "es2015",
      "dom",
      "ESNext"
    ],
 
    "allowJs": false,
    "jsx": "react-jsx",
    "sourceMap": true,
    "outDir": "dist",
    "rootDir": "src",
    "removeComments": true,
    "strict": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "isolatedModules": true,
    "noEmit": true,
    "baseUrl": "src",
    "paths": {
      "test-utils": [
        "./utils/test-utils"
      ]
    }
  }
}

.Bablerc & config

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

module.exports = {
  presets: [
    [
      '@parcel/babel-preset-env',
      {
        targets: {
          esmodules: true,
        },
      },
    ],
  ],
};

Is there something that could be causing this or am I missing something else?

• javascript
• reactjs
• jestjs
• babeljs
• react-leaflet

• 1 Search for ts-jest, you need a special transformer + preset for TS files in Jest – casraf Commented Aug 26, 2022 at 19:00
• This is a mon issue with Jest and ESM. It's a mess getting Jest to work with packages that's piled into ESM instead of CommonJS syntax. Check this documentation. jestjs.io/docs/ecmascript-modules – Abdulrahman Ali Commented Aug 26, 2022 at 19:05
• see this stackoverflow./questions/73203367/… – Unreal Commented Jan 3, 2023 at 13:33

2 Answers 2

The solution ended up being

const esModules = ['@react-leaflet', 'react-leaflet'].join('|');

above the jest.config.js

and in the config

  transformIgnorePatterns: [`/node_modules/(?!${esModules})`],

This did not work for me:

transformIgnorePatterns: [/node_modules/(?!${esModules})],

I solved it using the jest configuration moduleNameMapper:

jest.config.js

{
   moduleNameMapper: {
   "react-leaflet": "<rootDir>/src/__test__/mocks/reactLeafletMock.jsx"
   }
}

/src/test/mocks/reactLeafletMock.jsx

const MapContainer = ({ children }) => <div data-testId="MapContainer">{children}</div>;

const useMap = () => ({ fitBounds: () => {} });

const TileLayer = () => <div data-testId="TileLayer" />;

const Marker = ({ children }) => <div data-testId="Marker">{children}</div>;

const Popup = () => <div data-testId="Popup" />;

export { MapContainer, TileLayer, Marker, Popup, useMap };