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) moduleNameMapper: {'^(\\.{1,2}/.*)\\.js$': '$1'} — stealththeninja
– stealththeninja, Commented Jan 15, 2022 at 6: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
– TinkeringMatt, Commented Jan 18, 2022 at 13:00

Gargoyle · Accepted Answer · 2022-01-20 06:36:41Z

4

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.

answered Jan 20, 2022 at 6:36

Gargoyle

10.5k23 gold badges97 silver badges177 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Samy Sammour Over a year ago

You are a hero man! Thanks

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related