jest-preset-angular 不适用于 Angular 13 和 ESM 模块答案

【问题标题】：jest-preset-angular not working with Angular 13 and ESM modulejest-preset-angular 不适用于 Angular 13 和 ESM 模块
【发布时间】：2021-11-23 22:04:46
【问题描述】：

我正在使用带有 jest 的 ESM 模块，并且在使用 angular 12 jest-preset-angular 进行编译时，通过在排除列表中列出 @igniteui 对我来说效果很好。我升级到 Angular 13 和 jest-preset-angular 的下一个版本，但我现在无法让它工作。在帮助页面之后，我尝试使用它：

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']
}

当我运行 jest 时，它说找不到 igniteui 模块。这是我在旧版本中使用的 jest.config.js：

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']
}

【问题讨论】：

有什么想法吗，@thymikee？
修改模块名称映射器有帮助吗？（来源：ts-jest support for ESM）moduleNameMapper: {'^(\\.{1,2}/.*)\\.js$': '$1'}
这个问题好运吗？我对 angular 13 ans jest-preset-angular 有同样的问题。可以从您的经验中受益！ :)

标签： jest-preset-angular

【解决方案1】：

我终于通过这样做让它工作了：

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']
}

对于那些给您带来错误导入错误的库，请将它们添加到 transformIgnorePatters。你只需要前缀。因此，例如，我使用的是@infragistics/igniteui-angular，但我只添加了@infragistics。

【讨论】：