程序员经验分享-hwhale

Angular + Jest：无法解析 AppComponent 的所有参数：（？）

2024-03-17

我正在 Typescript Monorepo 内操作。我想向 Monorepo 添加一个带有 Jest 测试的 Angular 8 前端。但我遇到了一些问题。

我在用

Angular CLI: 8.3.5

我做了什么

我会用这个存储库 https://github.com/flolude/stackoverflow-monorepo-angular-jest/tree/5e6b316b3be5f02a596735eeeb48e6c18dca10a2作为起点！

1. 创建角度应用程序

Then in <root>/services I ran:

ng new frontend

创建 Angular 应用程序后，我可以运行ng test结果如下：

一切正常。

2.添加笑话

我在用https://github.com/briebug/jest-schematic https://github.com/briebug/jest-schematic轻松将 Jest 添加到我的 Angular 应用程序中

yarn global add @briebug/jest-schematic
ng add @briebug/jest-schematic

这会导致以下变化

Running 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/stackoverflow-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. 修复错误

杰斯特试图找到tsconfig.spec.json在错误的文件夹中。幸运的是，我发现a fix https://github.com/thymikee/jest-preset-angular/issues/286#issuecomment-519050423。我需要改变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. 我的问题

我现在添加了 AngularHttClient to my 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) {}
}

我还添加了HttpClientModule to app.module.ts并致imports in the app.component.spec.ts.

// 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/stackoverflow-monorepo-angular-jest/commit/9a2d8cac0dfa25a5f6620f38238c3f577b2acb63 https://github.com/flolude/stackoverflow-monorepo-angular-jest/commit/9a2d8cac0dfa25a5f6620f38238c3f577b2acb63自己尝试一下。


只需设置emitDecoratorMetadata to true在你的tsconfig.spec.json.

这允许ts-jest在 TypeScript 转译过程中不要丢失元数据。这个问题出乎意料jest-preset-angularAngular 更新到 8.1 版本后的开发人员

这是关于的问题jest-preset-angularGitHub：https://github.com/thymikee/jest-preset-angular/issues/288 https://github.com/thymikee/jest-preset-angular/issues/288

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

angular

typescript

jestjs

Angular8

monorepo

Angular + Jest：无法解析 AppComponent 的所有参数：（？） 的相关文章

随机推荐

热门标签