web-dev-qa-db-ja.com

Angular Karma Jasmineエラー：不正な状態：ディレクティブの概要を読み込めませんでした

私は githubリポジトリ （angular 7とangular-cliを使用）を開発していますが、masterブランチでKarmaとJasmineを使用したいくつかのテストがあります。

今、私は遅延読み込み機能を追加しようとしていますが、問題は、以前に合格したテストが現在はそうではないということです。面倒なのは、遅延読み込みモジュールのテストのみが失敗しているためです...

コードとエラーは次のとおりです。

import {async, TestBed} from '@angular/core/testing';
import {APP_BASE_HREF} from '@angular/common';
import {AppModule} from '../../app.module';
import {HeroDetailComponent} from './hero-detail.component';

describe('HeroDetailComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [AppModule
      ],
      providers: [
        {provide: APP_BASE_HREF, useValue: '/'}
      ],
    }).compileComponents();
  }));

  it('should create hero detail component', (() => {
    const fixture = TestBed.createComponent(HeroDetailComponent);
    const component = fixture.debugElement.componentInstance;
    expect(component).toBeTruthy();
  }));
});

エラーはこれです：

Chrome 58.0.3029 (Mac OS X 10.12.6) HeroDetailComponent should create hero detail component FAILED
    Error: Illegal state: Could not load the summary for directive HeroDetailComponent.
        at syntaxError Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/@angular/compiler/@angular/compiler.es5.js:1690:22)
        at CompileMetadataResolver.getDirectiveSummary Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/@angular/compiler/@angular/compiler.es5.js:15272:1)
        at JitCompiler.getComponentFactory Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/@angular/compiler/@angular/compiler.es5.js:26733:26)
        at TestingCompilerImpl.getComponentFactory Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/@angular/compiler/@angular/compiler/testing.es5.js:484:1)
        at TestBed.createComponent Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/@angular/core/@angular/core/testing.es5.js:874:1)
        at Function.TestBed.createComponent Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/@angular/core/@angular/core/testing.es5.js:652:1)
        at UserContext.it Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/src/app/heroes/hero-detail/hero-detail.component.spec.ts:18:29)
        at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/zone.js/dist/zone.js:391:1)
        at ProxyZoneSpec.onInvoke Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/zone.js/dist/proxy.js:79:1)
        at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/zone.js/dist/zone.js:390:1)

必要に応じて、プロジェクト全体を表示して詳細を確認できます。

更新：次のような宣言を追加しました：

beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        AppModule
      ],
      declarations: [HeroDetailComponent],
      providers: [
        {provide: APP_BASE_HREF, useValue: '/'}
      ],
    }).compileComponents();
  }));

現在、新しいエラーが表示されます。

The pipe 'translate' could not be found ("<h1 class="section-title">{{[ERROR ->]'heroDetail' | translate}}</h1>
    <md-progress-spinner *ngIf="!hero"
                         class="progre"): ng:///DynamicTestModule/HeroDetailComponent.html@0:28
    Can't bind to 'color' since it isn't a known property of 'md-progress-spinner'.

その他...角材からのすべてのディレクティブとコンポーネント、およびngx-translate/coreからのパイプ変換が含まれていないようです...

更新：最終的な解決策

問題は、HeroesModuleがどこにもインポートされていないことでした。 これは、HeroesModuleが最初の問題であったHeroDetailComponentを宣言するために機能します：

import {async, TestBed} from '@angular/core/testing';
import {APP_BASE_HREF} from '@angular/common';
import {AppModule} from '../../app.module';
import {HeroDetailComponent} from './hero-detail.component';
import {HeroesModule} from '../heroes.module';

describe('HeroDetailComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        AppModule,
        HeroesModule
      ],
      providers: [
        {provide: APP_BASE_HREF, useValue: '/'}
      ],
    }).compileComponents();
  }));

  it('should create hero detail component', (() => {
    const fixture = TestBed.createComponent(HeroDetailComponent);
    const component = fixture.debugElement.componentInstance;
    expect(component).toBeTruthy();
  }));
});
javascriptangularkarma-runnerkarma-jasmineangular-cli
61
ismaestro

最初にコンポーネントを宣言せずにHeroDetailComponentをTestBed.createComponent()に渡しました。

TestBed.configureTestingModule({
  imports: [AppModule,
     CommonModule,
     FormsModule,
     SharedModule,
     HeroRoutingModule,
     ReactiveFormsModule
  ],
  providers: [
    {provide: APP_BASE_HREF, useValue: '/'}
  ],
  declarations: [HeroDetailComponent]
}).compileComponents();

それが役に立てば幸い。

テストでの次のエラーの更新：インポートをいくつか追加しました（基本的にインポートして提供したいので、HeroModuleを青写真として取得してください）。

111
lexith

宣言が欠落しているため、テストするクラスを宣言に追加する必要があります。

declarations: [component]
5
Akash Yellappa

私の同僚と私はこの問題を抱えていましたが、修正はインターネット上の他のものとは大きく異なりました。

Visual Studio Codeを使用しており、フォルダー名は大文字と小文字を区別しません。そのため、すべてのユーザーに小文字の命名規則を使用するように依頼しましたが、最終的には大文字の名前がソース管理に組み込まれました。ラウンドアバウトで名前を変更しましたが、すべて問題ありませんでした。

1か月後、同僚はこのエラーメッセージで特定の単体テストを中断し始めました。彼のコンピューターだけがそのテストで壊れていました。テストに影響を与える可能性のあるすべてのコードを文字通りコメントアウトしましたが、それでもエラーが発生しました。最後に、クラスをグローバルに検索しましたが、フォルダー名が大文字に戻ったことがわかりました。名前を小文字に戻し、保留中の変更を認識せずに追加します...そしてテストは機能しました。

スタイルガイドに従うためのレッスンにしましょう。 :)

明確にするために、この修正はフォルダー名FOOをfooに変更するのと似ていました。

2
christo8989

このタイプのエラーは、TestBed構成のプロバイダーの宣言およびサービスにコンポーネントを追加できないために発生します。

beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [RouterTestingModule.withRoutes([
        { path: 'home', component: DummyComponent },
        { path: 'patients/find', component: DummyComponent }
      ])],
      declarations: [RoutingComponent, DummyComponent,BreadcrumbComponent],
      providers : [BreadCrumbService]
    });
2
Vijay Barot

コンポーネントHeroDetailComponentを正しい方法でインポートする必要があります。 注意文字が大文字であってもパスに問題があること。つまり、（ '@ angular/forms'は正しい、BUT '@ angular/Forms'は正しくありません。

1
sami