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

Question

我正在尝试用 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",

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

Answer 1

长话短说

\n

\n
1. 至少升级以下 Jest 依赖项*，以及
\n
2. 更新 Jest 和 Typescript 配置
\n

\n

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

\n

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

\n\n

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

\n

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

\n

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

\n

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

\n

接下来我升级了@angular-builders/jest，，jest和ts-jest。可能还需要更改 Jest 和 Typescript 配置。在您的tsconfig.json或中tsconfig.spec.json，检查它“具有module[in compilerOptions] 的 ESM 值，例如 ES2015 或 ES2020 等...”，如ts-lint 迁移文档中所述。

\n

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

\n

$HOME/$PROJECT/node_modules/@angular/core/fesm2015/testing.mjs:7\n    import { getDebugNode, RendererFactory2, \xc9\xb5stringify, \xc9\xb5ReflectionCapabilities, Directive, Component, Pipe, NgModule, \xc9\xb5getInjectableDef, resolveForwardRef, \xc9\xb5NG_COMP_DEF, \xc9\xb5Render3NgModuleRef, ApplicationInitStatus, LOCALE_ID, \xc9\xb5DEFAULT_LOCALE_ID, \xc9\xb5setLocaleId, \xc9\xb5Render3ComponentFactory, \xc9\xb5compileComponent, \xc9\xb5NG_DIR_DEF, \xc9\xb5compileDirective, \xc9\xb5NG_PIPE_DEF, \xc9\xb5compilePipe, \xc9\xb5NG_MOD_DEF, \xc9\xb5transitiveScopesFor, \xc9\xb5patchComponentDefWithScope, \xc9\xb5NG_INJ_DEF, \xc9\xb5compileNgModuleDefs, NgZone, Compiler, COMPILER_OPTIONS, \xc9\xb5NgModuleFactory, ModuleWithComponentFactories, InjectionToken, Injector, InjectFlags, \xc9\xb5resetCompiledComponents, \xc9\xb5flushModuleScopingQueueAsMuchAsPossible } from \'@angular/core\';\n    ^^^^^^\n\n    SyntaxError: Cannot use import statement outside a module\n

\n

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

\n

迁移和 ESM 支持文档

\n

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

\n

Answer 2

我不确定是哪一个，但更新这些依赖项后我摆脱了这个错误：

"@briebug/jest-schematic": "^4.0.0",
"ts-jest": "^27.1.2",
"@angular-builders/jest": "13.0.2",
"@types/jest": "^27.4.0",
"jest": "^27.4.5",
"jest-when": "^3.5.0",