@nrwl/nx工作区运行Jest测试导入第三方Angular模块报错求助

问题根因 #

该报错的核心原因是Jest默认跳过转换node_modules目录下的所有文件，而@ngx-translate/core、ngx-bootstrap这类第三方Angular库发布的ES模块产物没有经过Angular编译器处理，Jest运行时无法识别模块上的@NgModule注解，从而抛出异常。

解决方案 #

步骤1：修改库的jest.config.js配置 #

在配置中添加transformIgnorePatterns字段，将需要转换的第三方包排除在Jest的忽略转换列表外：

module.exports = {
  displayName: 'my-lib-name',
  preset: '../../jest.preset.js',
  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
  // 新增以下配置
  transformIgnorePatterns: [
    'node_modules/(?!.*\\.mjs$|@ngx-translate|ngx-bootstrap)'
  ],
  globals: {
    'ts-jest': {
      tsconfig: '<rootDir>/tsconfig.spec.json',
      stringifyContentPathRegex: '\\.(html|svg)$',
    },
  },
  coverageDirectory: '../../coverage/libs/my-lib-name',
  transform: {
    '^.+\\.(ts|mjs|js|html)$': 'jest-preset-angular',
  },
  // 新增mjs到模块识别扩展名
  moduleFileExtensions: ['ts', 'js', 'html', 'mjs'],
  snapshotSerializers: [
    'jest-preset-angular/build/serializers/no-ng-attributes',
    'jest-preset-angular/build/serializers/ng-snapshot',
    'jest-preset-angular/build/serializers/html-comment',
  ]
};

步骤2：验证配置生效 #

重新执行nx test my-lib-name，测试即可正常运行。如果后续有其他第三方Angular库触发同类报错，只需将包名添加到transformIgnorePatterns的括号内，用|分隔即可。

优化建议 #

如果需要适配所有第三方Angular库不想逐个添加，可以将transformIgnorePatterns调整为：

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

该配置会让Jest转换所有node_modules下的.mjs文件，适配绝大多数发布ES模块的Angular第三方库，缺点是首次测试运行速度会略有下降。

内容的提问来源于stack exchange，提问作者Gerry