jest-preset-angular not working with Angular 13 and ESM module

Question

I'm using ESM modules with jest and when compiling with angular 12 jest-preset-angular worked great for me by listing @igniteui in the exclusion list. I upgraded to Angular 13, and the Next version of jest-preset-angular, but I can't get it working now. Following the help page I tried to use this:

require('jest-preset-angular/ngcc-jest-processor')

module.exports = {
    preset: 'jest-preset-angular/presets/defaults-esm',
    moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],
    resolver: 'jest-preset-angular/build/resolvers/ng-jest-resolver.js',
    transformIgnorePatterns: [
        "node_modules/(?!@igniteui|tslib|.*\\.mjs$)"
    ],
    transform: {
        '^.+\\.(ts|js|mjs|html|svg)$': 'jest-preset-angular'
    },
    setupFilesAfterEnv: ['<rootDir>/setup-jest.ts']
}

When I run jest it says it can't find the igniteui module. This is the jest.config.js I was using with the older version:

require('jest-preset-angular/ngcc-jest-processor')

module.exports = {
    preset: 'jest-preset-angular/presets/defaults-esm',
    globals: {
        'ts-jest': {
            useESM: true,
            tsconfig: '<rootDir>/tsconfig.spec.json',
            stringifyContentPathRegex: '\\.html$'
        }
    },
    testTimeout: 20000,
    transformIgnorePatterns: [
        "node_modules/(?!@igniteui|tslib)"
    ],
    setupFilesAfterEnv: ['<rootDir>/setup-jest.ts']
}

Does modifying module name mapper help? (source: [ts-jest support for ESM](https://kulshekhar.github.io/ts-jest/docs/guides/esm-support/)) `moduleNameMapper: {'^(\\.{1,2}/.*)\\.js$': '$1'}` — stealththeninja, Jan 15 '22 at 06:27
Any luck with this issue? I am having the same problem with angular 13 ans jest-preset-angular. Could benefit from your experience! :) — TinkeringMatt, Jan 18 '22 at 13:00

score 2 · Accepted Answer · answered Jan 20 '22 at 06:36

I finally got it working by doing this:

require('jest-preset-angular')

module.exports = {
    preset: 'jest-preset-angular/presets/defaults-esm',
    transformIgnorePatterns: [
        "node_modules/(?!@igniteui|@infragistics|tslib)"
    ],
    moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],
    setupFilesAfterEnv: ['<rootDir>/setup-jest.ts']
}

For those libraries giving you the bad import errors, add them to the transformIgnorePatters. You just need the prefix. So, for example, I'm using @infragistics/igniteui-angular but I only added @infragistics.

jest-preset-angular not working with Angular 13 and ESM module

1 Answers1

Linked