包子路径'./src/ngtsc/reflection'不是由/node_modules/@angular/compiler-cli/package.json中的“exports”定义的

我正在尝试用 jest 运行 ng 测试并收到以下错误

Package subpath './src/ngtsc/reflection' is not defined by "exports" in /Users/oyf992/source/app-mngt/node_modules/@angular/compiler-cli/package.json

我在用

"@angular/core": "^13.0.1", "jest": "27.2.3", "jest-preset-angular": "10.0.1",

让我知道可能的原因和可能的解决方案。

TL;DR

1. 升级以下 Jest 依赖项至少*, and
2. 更新 Jest 和 Typescript 配置

*您的项目可能需要额外升级——我的项目则需要。我发现与 (1) Angular 13 升级 + Jest 和 (2) Jest ESModule 支持相关的搜索结果最有帮助。

"@angular-builders/jest": "^13.0.2",
"jest": "^27.4.7",
"jest-preset-angular": "^11.0.1",
"ts-jest": "^27.1.2",

Angular 13 和 Jest：发生了什么变化？

Angular 13 中对 Jest 最具破坏性的重大变化是ESModule 工件（.mjs)。 Jest 运行在支持 CommonJS 模块的 Node 中。它对 ESModules 具有实验性支持，并且需要额外的配置才能启用它。

升级中jest-preset-angular解决了第一个错误（反射子路径）并发现了第二个错误：

$HOME/$PROJECT/node_modules/@angular/core/fesm2015/testing.mjs:7
    import { getDebugNode, RendererFactory2, ɵstringify, ɵReflectionCapabilities, Directive, Component, Pipe, NgModule, ɵgetInjectableDef, resolveForwardRef, ɵNG_COMP_DEF, ɵRender3NgModuleRef, ApplicationInitStatus, LOCALE_ID, ɵDEFAULT_LOCALE_ID, ɵsetLocaleId, ɵRender3ComponentFactory, ɵcompileComponent, ɵNG_DIR_DEF, ɵcompileDirective, ɵNG_PIPE_DEF, ɵcompilePipe, ɵNG_MOD_DEF, ɵtransitiveScopesFor, ɵpatchComponentDefWithScope, ɵNG_INJ_DEF, ɵcompileNgModuleDefs, NgZone, Compiler, COMPILER_OPTIONS, ɵNgModuleFactory, ModuleWithComponentFactories, InjectionToken, Injector, InjectFlags, ɵresetCompiledComponents, ɵflushModuleScopingQueueAsMuchAsPossible } from '@angular/core';
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module

接下来我升级了@angular-builders/jest, jest, and ts-jest。可能还需要更改 Jest 和 Typescript 配置。在你的tsconfig.json or tsconfig.spec.json，检查它是否“有module [in compilerOptions] 具有 ESM 值，例如ES2015 或 ES2020 等...”，如中所述ts-lint 迁移文档 https://kulshekhar.github.io/ts-jest/docs/guides/esm-support/.

以下是我对项目的 Jest 配置所做的更改，但每个项目都略有不同。

// jest.config.js
const esModules = ['@angular', '@ngrx', 'd3', [...]];
module.exports = {
  // [...]
  extensionsToTreatAsEsm: ['.ts'], // ts-jest
  globals: {
    'ts-jest': {
      useESM: true, // ts-jest
    },
  },
  moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'], // jest-preset-angular
  moduleNameMapper: {
    '^(\\.{1,2}/.*)\\.js$': '$1', // ts-jest
  },
  preset: 'jest-preset-angular',
  transform: {
    '^.+\\.(ts|js|mjs|html|svg)$': 'jest-preset-angular',
  },
  transformIgnorePatterns: [
    `<rootDir>/node_modules/(?!.*\\.mjs$|${esModules.join('|')})`, // jest-preset-angular
  ],
}

如果您仍然遇到问题，我在下面提供了每个迁移文档的链接。我仍在解决其他软件包的问题，​​但希望这能让您走上一条好的道路！

迁移和 ESM 支持文档

• 角度最新升级：https://angular.io/guide/update-to-latest-version https://angular.io/guide/update-to-latest-version
• @angular-builders/jest: https://github.com/just-jeb/angular-builders/blob/master/MIGRATION.MD https://github.com/just-jeb/angular-builders/blob/master/MIGRATION.MD
• jest-preset-angular: https://thymikee.github.io/jest-preset-angular/docs/next/guides/angular-13+/ https://thymikee.github.io/jest-preset-angular/docs/next/guides/angular-13+/
• ts-jestESM 支持：https://kulshekhar.github.io/ts-jest/docs/guides/esm-support/ https://kulshekhar.github.io/ts-jest/docs/guides/esm-support/
• 玩笑 ESM 支持：https://jestjs.io/docs/ecmascript-modules https://jestjs.io/docs/ecmascript-modules
• 如果你仍然得到Cannot use import错误，对已关闭的 GitHub 问题的有用评论：https://github.com/thymikee/jest-preset-angular/issues/1149#issuecomment-963506942 https://github.com/thymikee/jest-preset-angular/issues/1149#issuecomment-963506942