Jest: SyntaxError: Unexpected token 'export' happens at tslib.es6.js

Question

I get this error:

C:\Users\myname\Projects\ConfigEditor\MesConfiguration.WebClient\node_modules\tslib\tslib.es6.js:24
    export function __extends(d, b) {
    ^^^^^^

    SyntaxError: Unexpected token 'export'

My jest-esm.config.mjs looks like this

const jestConfig = {
  preset: 'jest-preset-angular/presets/defaults-esm',
  extensionsToTreatAsEsm: ['.ts'],
  globals: {
    'ts-jest': {
      useESM: true,
      stringifyContentPathRegex: '\\.(html|svg)$',
      tsconfig: '<rootDir>/tsconfig-esm.spec.json',
    },
  },
  testEnvironment: 'jsdom',
  moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],
  resolver: 'jest-preset-angular/build/resolvers/ng-jest-resolver.js',
  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
  transform: {
    '^.+\\.(ts|js|mjs|html|svg)$': 'jest-preset-angular',
  },
  globalSetup: 'jest-preset-angular/global-setup',
  moduleNameMapper: {
    //tslib: 'tslib/tslib.mjs',
    tslib: 'tslib/tslib.es6.js',
    "@shared/(.*)": "<rootDir>/src/app/shared/$1",
    "@editors/(.*)": "<rootDir>/src/app/editors/$1",
    "@dashboard/(.*)": "<rootDir>/src/app/dashboard/$1",
    "@env": "<rootDir>/src/environments/environment",
  },
  setupFilesAfterEnv: ['<rootDir>/src/setup-jest.ts'],
}

export default jestConfig;

package.json has

"type": "module",

I start the test with

"test-esm": "node --experimental-vm-modules --no-warnings node_modules/jest/bin/jest.js -c=jest-esm.config.mjs --no-cache",

What ist wrong?

After renaming the tslib.es6.js to tslib.mjs the error is gone, but this is no solution. It should work after any yarn install

Driblet

Answer 1

The error is gone because you have set

transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)']

you are basically using the preset jest-preset-angular/presets/defaults-esm So most of the properties you are typing in the config are redundant

One thing is that the transformIgnorePatterns somehow does not work with multiple items in that array (in some cases) so it is better to put everything at once like in my case

transformIgnorePatterns: ['node_modules/(?!rxjs|tslib)']

here is my full jest.config.js and setup-jest.ts file I am using with Angular14 with the ESM execution node --experimental-vm-modules node_modules/jest/bin/jest.js

// jest-config.ts
module.exports = {
  preset: 'jest-preset-angular/presets/defaults-esm',
  testRegex: '.*spec.ts$',
  transformIgnorePatterns: [
    'node_modules/(?!rxjs|tslib)'
  ],
  moduleNameMapper: {
    "^dnd-core$": "dnd-core/dist",
    "^react-dnd$": "react-dnd/dist",
    "^react-dnd-html5-backend$": "react-dnd-html5-backend/dist",
    "^react-dnd-touch-backend$": "react-dnd-touch-backend/dist",
    "^react-dnd-test-backend$": "react-dnd-test-backend/dist",
    "^react-dnd-test-utils$": "react-dnd-test-utils/dist"
  },
  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
};

// setup-jest.ts
import 'jest-preset-angular/setup-jest.mjs';

Object.defineProperty(window, "getComputedStyle", {
    value: () => ["-webkit-appearance"]
});

Malorie