Angular + Jest：无法解析 AppComponent 的所有参数：（？）
Posted
技术标签:
【中文标题】Angular + Jest：无法解析 AppComponent 的所有参数：（？）【英文标题】：Angular + Jest: Can't resolve all parameters for AppComponent: (?) 【发布时间】：2020-01-24 06:31:14 【问题描述】：我在 Typescript Monorepo 中进行操作。我想向 Monorepo 添加一个带有 Jest 测试的 Angular 8 前端。但是我遇到了一些问题。
我正在使用
Angular CLI: 8.3.5
我做了什么
我将以this repository为起点！
1。创建 Angular 应用程序
然后在<root>/services我跑了：
ng new frontend
创建 Angular 应用程序后，我能够运行 ng test 并得到以下结果：
一切正常。
2。添加笑话
我正在使用https://github.com/briebug/jest-schematic 轻松地将 Jest 添加到我的 Angular 应用程序中
yarn global add @briebug/jest-schematic
ng add @briebug/jest-schematic
这会导致以下变化
运行jest 会导致以下错误：
$ jest
FAIL src/app/app.component.spec.ts
● Test suite failed to run
File not found: <rootDir>/src/tsconfig.spec.json (resolved as: /home/flo/Desktop/***-monorepo-angular-jest/services/frontend/src/tsconfig.spec.json)
at ConfigSet.resolvePath (node_modules/ts-jest/dist/config/config-set.js:712:19)
at ConfigSet.get (node_modules/ts-jest/dist/config/config-set.js:202:67)
at ConfigSet.tsJest (node_modules/ts-jest/dist/util/memoize.js:43:24)
at ConfigSet.get (node_modules/ts-jest/dist/config/config-set.js:297:41)
at ConfigSet.versions (node_modules/ts-jest/dist/util/memoize.js:43:24)
at ConfigSet.get (node_modules/ts-jest/dist/config/config-set.js:583:32)
at ConfigSet.jsonValue (node_modules/ts-jest/dist/util/memoize.js:43:24)
at ConfigSet.get [as cacheKey] (node_modules/ts-jest/dist/config/config-set.js:598:25)
at TsJestTransformer.getCacheKey (node_modules/ts-jest/dist/ts-jest-transformer.js:126:36)
at ScriptTransformer._getCacheKey (node_modules/@jest/transform/build/ScriptTransformer.js:266:23)
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 1.267s
Ran all test suites.
3。修复错误
Jest 试图在错误的文件夹中找到 tsconfig.spec.json。幸运的是，我找到了a fix。我需要更改jest.config.js
module.exports =
preset: 'jest-preset-angular',
setupFilesAfterEnv: ['<rootDir>/src/setup-jest.ts'],
globals:
'ts-jest':
tsConfig: '<rootDir>/tsconfig.spec.json',
diagnostics: false,
stringifyContentPathRegex: '\\.html$',
astTransformers: [require.resolve('jest-preset-angular/InlineHtmlStripStylesTransformer')],
,
,
;
现在当我运行 jest 时，它可以工作了：
4。我的问题
我现在已将 Angular HttClient 添加到我的 AppComponent：
// app.component.ts
import Component from '@angular/core';
import HttpClient from '@angular/common/http';
@Component(
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
)
export class AppComponent
title = 'frontend';
constructor(private http: HttpClient)
我还在app.component.spec.ts 中将HttpClientModule 添加到app.module.ts 和imports。
// app.module.ts
import BrowserModule from '@angular/platform-browser';
import NgModule from '@angular/core';
import HttpClientModule from '@angular/common/http';
import AppRoutingModule from './app-routing.module';
import AppComponent from './app.component';
@NgModule(
declarations: [AppComponent],
imports: [BrowserModule, AppRoutingModule, HttpClientModule],
providers: [],
bootstrap: [AppComponent],
)
export class AppModule
// app.component.spec.ts
import TestBed, async from '@angular/core/testing';
import RouterTestingModule from '@angular/router/testing';
import AppComponent from './app.component';
import HttpClientModule, HttpClient from '@angular/common/http';
describe('AppComponent', () =>
beforeEach(async(() =>
TestBed.configureTestingModule(
imports: [RouterTestingModule, HttpClientModule],
declarations: [AppComponent],
).compileComponents();
));
it('should create the app', () =>
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
);
it(`should have as title 'frontend'`, () =>
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app.title).toEqual('frontend');
);
it('should render title', () =>
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.debugElement.nativeElement;
expect(compiled.querySelector('.content span').textContent).toContain('frontend app is running!');
);
);
但是，在运行jest 时，我收到以下错误：
$ jest
FAIL src/app/app.component.spec.ts
AppComponent
✕ should create the app (449ms)
✕ should have as title 'frontend' (10ms)
✕ should render title (10ms)
● AppComponent › should create the app
Can't resolve all parameters for AppComponent: (?).
at syntaxError (../../../packages/compiler/src/util.ts:100:17)
at CompileMetadataResolver._getDependenciesMetadata (../../../packages/compiler/src/metadata_resolver.ts:957:27)
at CompileMetadataResolver._getTypeMetadata (../../../packages/compiler/src/metadata_resolver.ts:836:20)
at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (../../../packages/compiler/src/metadata_resolver.ts:377:18)
at CompileMetadataResolver.loadDirectiveMetadata (../../../packages/compiler/src/metadata_resolver.ts:224:11)
at ../../../packages/compiler/src/jit/compiler.ts:135:36
at Array.forEach (<anonymous>)
at ../../../packages/compiler/src/jit/compiler.ts:133:65
at Array.forEach (<anonymous>)
at JitCompiler._loadModules (../../../packages/compiler/src/jit/compiler.ts:130:71)
at JitCompiler._compileModuleAndAllComponents (../../../packages/compiler/src/jit/compiler.ts:115:32)
at JitCompiler.compileModuleAndAllComponentsAsync (../../../packages/compiler/src/jit/compiler.ts:69:33)
at CompilerImpl.compileModuleAndAllComponentsAsync (../../../packages/platform-browser-dynamic/src/compiler_factory.ts:69:27)
at TestingCompilerImpl.compileModuleAndAllComponentsAsync (../../../../packages/platform-browser-dynamic/testing/src/compiler_factory.ts:57:27)
at TestBedViewEngine.compileComponents (../../../../packages/core/testing/src/test_bed.ts:362:27)
at Function.TestBedViewEngine.compileComponents (../../../../packages/core/testing/src/test_bed.ts:160:66)
at testing_1.async (src/app/app.component.spec.ts:11:8)
● AppComponent › should create the app
Can't resolve all parameters for AppComponent: (?).
at syntaxError (../../../packages/compiler/src/util.ts:100:17)
at CompileMetadataResolver._getDependenciesMetadata (../../../packages/compiler/src/metadata_resolver.ts:957:27)
at CompileMetadataResolver._getTypeMetadata (../../../packages/compiler/src/metadata_resolver.ts:836:20)
at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (../../../packages/compiler/src/metadata_resolver.ts:377:18)
at CompileMetadataResolver.loadDirectiveMetadata (../../../packages/compiler/src/metadata_resolver.ts:224:11)
at ../../../packages/compiler/src/jit/compiler.ts:135:36
at Array.forEach (<anonymous>)
at ../../../packages/compiler/src/jit/compiler.ts:133:65
at Array.forEach (<anonymous>)
at JitCompiler._loadModules (../../../packages/compiler/src/jit/compiler.ts:130:71)
at JitCompiler._compileModuleAndAllComponents (../../../packages/compiler/src/jit/compiler.ts:115:32)
at JitCompiler.compileModuleAndAllComponentsSync (../../../packages/compiler/src/jit/compiler.ts:65:38)
at CompilerImpl.compileModuleAndAllComponentsSync (../../../packages/platform-browser-dynamic/src/compiler_factory.ts:61:35)
at TestingCompilerImpl.compileModuleAndAllComponentsSync (../../../../packages/platform-browser-dynamic/testing/src/compiler_factory.ts:52:27)
at TestBedViewEngine._initIfNeeded (../../../../packages/core/testing/src/test_bed.ts:376:28)
at TestBedViewEngine.createComponent (../../../../packages/core/testing/src/test_bed.ts:570:10)
at Function.TestBedViewEngine.createComponent (../../../../packages/core/testing/src/test_bed.ts:232:36)
at it (src/app/app.component.spec.ts:15:29)
● AppComponent › should have as title 'frontend'
Can't resolve all parameters for AppComponent: (?).
at syntaxError (../../../packages/compiler/src/util.ts:100:17)
at CompileMetadataResolver._getDependenciesMetadata (../../../packages/compiler/src/metadata_resolver.ts:957:27)
at CompileMetadataResolver._getTypeMetadata (../../../packages/compiler/src/metadata_resolver.ts:836:20)
at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (../../../packages/compiler/src/metadata_resolver.ts:377:18)
at CompileMetadataResolver.loadDirectiveMetadata (../../../packages/compiler/src/metadata_resolver.ts:224:11)
at ../../../packages/compiler/src/jit/compiler.ts:135:36
at Array.forEach (<anonymous>)
at ../../../packages/compiler/src/jit/compiler.ts:133:65
at Array.forEach (<anonymous>)
at JitCompiler._loadModules (../../../packages/compiler/src/jit/compiler.ts:130:71)
at JitCompiler._compileModuleAndAllComponents (../../../packages/compiler/src/jit/compiler.ts:115:32)
at JitCompiler.compileModuleAndAllComponentsAsync (../../../packages/compiler/src/jit/compiler.ts:69:33)
at CompilerImpl.compileModuleAndAllComponentsAsync (../../../packages/platform-browser-dynamic/src/compiler_factory.ts:69:27)
at TestingCompilerImpl.compileModuleAndAllComponentsAsync (../../../../packages/platform-browser-dynamic/testing/src/compiler_factory.ts:57:27)
at TestBedViewEngine.compileComponents (../../../../packages/core/testing/src/test_bed.ts:362:27)
at Function.TestBedViewEngine.compileComponents (../../../../packages/core/testing/src/test_bed.ts:160:66)
at testing_1.async (src/app/app.component.spec.ts:11:8)
● AppComponent › should have as title 'frontend'
Can't resolve all parameters for AppComponent: (?).
at syntaxError (../../../packages/compiler/src/util.ts:100:17)
at CompileMetadataResolver._getDependenciesMetadata (../../../packages/compiler/src/metadata_resolver.ts:957:27)
at CompileMetadataResolver._getTypeMetadata (../../../packages/compiler/src/metadata_resolver.ts:836:20)
at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (../../../packages/compiler/src/metadata_resolver.ts:377:18)
at CompileMetadataResolver.loadDirectiveMetadata (../../../packages/compiler/src/metadata_resolver.ts:224:11)
at ../../../packages/compiler/src/jit/compiler.ts:135:36
at Array.forEach (<anonymous>)
at ../../../packages/compiler/src/jit/compiler.ts:133:65
at Array.forEach (<anonymous>)
at JitCompiler._loadModules (../../../packages/compiler/src/jit/compiler.ts:130:71)
at JitCompiler._compileModuleAndAllComponents (../../../packages/compiler/src/jit/compiler.ts:115:32)
at JitCompiler.compileModuleAndAllComponentsSync (../../../packages/compiler/src/jit/compiler.ts:65:38)
at CompilerImpl.compileModuleAndAllComponentsSync (../../../packages/platform-browser-dynamic/src/compiler_factory.ts:61:35)
at TestingCompilerImpl.compileModuleAndAllComponentsSync (../../../../packages/platform-browser-dynamic/testing/src/compiler_factory.ts:52:27)
at TestBedViewEngine._initIfNeeded (../../../../packages/core/testing/src/test_bed.ts:376:28)
at TestBedViewEngine.createComponent (../../../../packages/core/testing/src/test_bed.ts:570:10)
at Function.TestBedViewEngine.createComponent (../../../../packages/core/testing/src/test_bed.ts:232:36)
at it (src/app/app.component.spec.ts:21:29)
● AppComponent › should render title
Can't resolve all parameters for AppComponent: (?).
at syntaxError (../../../packages/compiler/src/util.ts:100:17)
at CompileMetadataResolver._getDependenciesMetadata (../../../packages/compiler/src/metadata_resolver.ts:957:27)
at CompileMetadataResolver._getTypeMetadata (../../../packages/compiler/src/metadata_resolver.ts:836:20)
at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (../../../packages/compiler/src/metadata_resolver.ts:377:18)
at CompileMetadataResolver.loadDirectiveMetadata (../../../packages/compiler/src/metadata_resolver.ts:224:11)
at ../../../packages/compiler/src/jit/compiler.ts:135:36
at Array.forEach (<anonymous>)
at ../../../packages/compiler/src/jit/compiler.ts:133:65
at Array.forEach (<anonymous>)
at JitCompiler._loadModules (../../../packages/compiler/src/jit/compiler.ts:130:71)
at JitCompiler._compileModuleAndAllComponents (../../../packages/compiler/src/jit/compiler.ts:115:32)
at JitCompiler.compileModuleAndAllComponentsAsync (../../../packages/compiler/src/jit/compiler.ts:69:33)
at CompilerImpl.compileModuleAndAllComponentsAsync (../../../packages/platform-browser-dynamic/src/compiler_factory.ts:69:27)
at TestingCompilerImpl.compileModuleAndAllComponentsAsync (../../../../packages/platform-browser-dynamic/testing/src/compiler_factory.ts:57:27)
at TestBedViewEngine.compileComponents (../../../../packages/core/testing/src/test_bed.ts:362:27)
at Function.TestBedViewEngine.compileComponents (../../../../packages/core/testing/src/test_bed.ts:160:66)
at testing_1.async (src/app/app.component.spec.ts:11:8)
● AppComponent › should render title
Can't resolve all parameters for AppComponent: (?).
at syntaxError (../../../packages/compiler/src/util.ts:100:17)
at CompileMetadataResolver._getDependenciesMetadata (../../../packages/compiler/src/metadata_resolver.ts:957:27)
at CompileMetadataResolver._getTypeMetadata (../../../packages/compiler/src/metadata_resolver.ts:836:20)
at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (../../../packages/compiler/src/metadata_resolver.ts:377:18)
at CompileMetadataResolver.loadDirectiveMetadata (../../../packages/compiler/src/metadata_resolver.ts:224:11)
at ../../../packages/compiler/src/jit/compiler.ts:135:36
at Array.forEach (<anonymous>)
at ../../../packages/compiler/src/jit/compiler.ts:133:65
at Array.forEach (<anonymous>)
at JitCompiler._loadModules (../../../packages/compiler/src/jit/compiler.ts:130:71)
at JitCompiler._compileModuleAndAllComponents (../../../packages/compiler/src/jit/compiler.ts:115:32)
at JitCompiler.compileModuleAndAllComponentsSync (../../../packages/compiler/src/jit/compiler.ts:65:38)
at CompilerImpl.compileModuleAndAllComponentsSync (../../../packages/platform-browser-dynamic/src/compiler_factory.ts:61:35)
at TestingCompilerImpl.compileModuleAndAllComponentsSync (../../../../packages/platform-browser-dynamic/testing/src/compiler_factory.ts:52:27)
at TestBedViewEngine._initIfNeeded (../../../../packages/core/testing/src/test_bed.ts:376:28)
at TestBedViewEngine.createComponent (../../../../packages/core/testing/src/test_bed.ts:570:10)
at Function.TestBedViewEngine.createComponent (../../../../packages/core/testing/src/test_bed.ts:232:36)
at it (src/app/app.component.spec.ts:27:29)
Test Suites: 1 failed, 1 total
Tests: 3 failed, 3 total
Snapshots: 0 total
Time: 1.682s, estimated 2s
Ran all test suites.
error Command failed with exit code 1.
使用 Jasmine + Karma 时测试运行良好。使用 jest 进行测试时，依赖注入似乎出了点问题。
您可以在此处找到存储库：https://github.com/flolude/***-monorepo-angular-jest/commit/9a2d8cac0dfa25a5f6620f38238c3f577b2acb63 自己尝试一下。
【问题讨论】：
尝试模拟你的依赖而不是导入完全相同的依赖。您还拥有该服务的testing implementation。 Mocking 不会改变任何东西，因为我还没有创建自己的服务（问题是由其他原因引起的）...HttpClientTestingModule 也不起作用...奇怪的是，当我在标准 Karma-Jasmine 测试环境中遵循相同的步骤时，它工作正常
你不能说嘲笑不会改变任何事情。这就是单元测试的基础。据我所知，您没有在测试中导入 HTTP 模块，因此导致了该错误。顺便说一句，如果您可以发布您的代码，那就太好了，因为如果我们没有看到它，我们无法告诉您它有什么问题......
（不，我不想浏览您的 github 来查找代码，并且您应该将代码发布在您的问题上，以防外部链接不起作用）
@Maryannah 你是完全正确的！我的错。我现在已经添加了代码 sn-ps :)
【参考方案1】：
只需在您的tsconfig.spec.json 中将emitDecoratorMetadata 设置为true。
这允许ts-jest 在 TypeScript 转换期间不会丢失元数据。在 Angular 更新到版本 8.1 后，jest-preset-angular 开发人员出乎意料地出现了这个问题
这是jest-preset-angular GitHub 上的问题：https://github.com/thymikee/jest-preset-angular/issues/288
【讨论】：
完美。今天有完全相同的问题，这解决了它。 有趣的是，我在 tsconfig.json 文件中设置了这个，我的 tsconfig.spec.json 继承自该文件，但我仍然必须在 tsconfig.spec.json 文件中设置这个选项。谢谢！ 也很有趣：我首先只在tsconfig.spec.json 中拥有它并且它没有效果，所以我将该属性移动到tsconfig.json （从中继承 tsconfig.spec.json）然后才使用它工作。有点与马特的经历相反。底线：在你放弃之前，尝试所有组合:-)以上是关于Angular + Jest：无法解析 AppComponent 的所有参数：（？）的主要内容，如果未能解决你的问题，请参考以下文章
Angular Test Jest - TypeError：无法读取未定义的属性“queryParams”
Angular 8 和 jest - 找不到文件：jest-preset-angular/InlineHtmlStripStylesTransformer.js