Angular Karma Jasmine Fehler: Unzulässiger Status: Die Zusammenfassung für die Direktive konnte nicht geladen werden

Ich entwickle ein Github-Repository (mit Angular 7 und Angular -Cli) und habe einige Tests mit Karma und Jasmine, die in der Hauptniederlassung arbeiten.

Jetzt versuche ich, die Funktion zum verzögerten Laden hinzuzufügen. Die Sache ist, dass die Tests, die zuvor bestanden wurden, jetzt nicht mehr funktionieren. Es ist lustig, weil nur die Tests des Lazy-Loading-Moduls fehlschlagen ...

Hier ist der Code und der Fehler:

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();
  }));
});

Der Fehler ist folgender:

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)

Sie können das gesamte Projekt anzeigen, um weitere Details zu erhalten, wenn Sie es benötigen.

UPDATE: Deklaration wie folgt hinzugefügt:

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

Jetzt erscheinen neue Fehler:

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'.

Und mehr noch ... es ist wie bei allen Direktiven und Komponenten aus eckigem Material, und die von ngx-translate / core übersetzte Pipe scheint nicht enthalten zu sein ...

AKTUALISIERT: ENDGÜLTIGE LÖSUNG

Das Problem war, dass HeroesModule nirgendwo importiert wurde. Dies funktioniert, da HeroesModule HeroDetailComponent deklariert, was das ursprüngliche Problem war :

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();
  }));
});

Sie haben übergeben HeroDetailComponent, TestBed.createComponent()ohne die Komponente zuerst zu deklarieren:

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

Ich hoffe es hilft.

Update für folgende Fehler in Ihrem Test: Weitere Importe hinzugefügt (nehmen Sie einfach Ihr HeroModule als Blaupause, da Sie diese im Grunde importieren und bereitstellen möchten).

Wenn Sie die Deklarationen vermissen, müssen Sie die getestete Klasse zu den Deklarationen hinzufügen.

declarations: [component]

Diese Art von Fehler wird ausgelöst, weil beim Hinzufügen der TestBed-Konfiguration eine Komponente in Deklarationen und Diensten fehlt.

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

Mein Kollege und ich hatten dieses Problem, aber das Update war ganz anders als alles andere im Internet.

Wir verwenden Visual Studio Code und die Ordnernamen unterscheiden nicht zwischen Groß- und Kleinschreibung. Aus diesem Grund haben wir alle gebeten, eine Namenskonvention in Kleinbuchstaben zu verwenden, aber schließlich wurde ein Name in Großbuchstaben in die Quellcodeverwaltung übernommen. Wir haben es auf Umwegen umbenannt, und alles war in Ordnung.

Einen Monat später bekam mein Mitarbeiter einen bestimmten Komponententest, um mit dieser Fehlermeldung zu brechen. Nur sein Computer war bei diesem Test kaputt. Wir haben buchstäblich den gesamten Code auskommentiert, der den Test beeinflussen könnte, und wir haben immer noch den Fehler erhalten. Schließlich habe ich global nach der Klasse gesucht und festgestellt, dass der Ordnername wieder in Großbuchstaben umgewandelt wurde. Wir haben es wieder in Kleinbuchstaben umbenannt, ohne dass ausstehende Änderungen erkannt wurden, könnte ich hinzufügen ... und der Test hat funktioniert.

Lassen Sie das eine Lektion sein, um Styleguides zu folgen. :) :)

Aus Gründen der Übersichtlichkeit ähnelte das Update dem Ändern des Ordnernamens FOOin foo.

Sie müssen die Komponente HeroDetailComponent richtig importieren . Beachten Sie, dass auch der Fall von Buchstaben in Pfaden eine Rolle spielt. dh ('@ eckig / Formen' ist korrekt, ABER '@ eckig / Formen' nicht.

Für diejenigen, die immer noch Probleme damit haben - ich habe ein separates Github-Problem gelesen, in dem Änderungen besprochen wurden, die das Angular-Team an der beforeEach-Rückruffunktion vorgenommen hat.

Folgendes habe ich getan:

beforeAll(async(() => {
    TestBed.configureTestingModule({
        declarations: [BannerNotificationComponent]
    }).compileComponents()

    fixture = TestBed.createComponent(BannerNotificationComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
}));

Die Verwendung von beforeAll behebt das Problem. Ich hoffe, dies hilft anderen, da ich ungefähr einen Tag gebraucht habe, um diesen obskuren Fehler zu beheben.

Wenn Sie eine Komponente testen möchten, ohne sie zu kompilieren, können Sie sie als Anbieter deklarieren:

beforeEach(() => {
  TestBed.configureTestingModule({
    // provide the component-under-test and dependent service
    providers: [
      WelcomeComponent,
      { provide: UserService, useClass: MockUserService }
    ]
  });
  // inject both the component and the dependent service.
  comp = TestBed.get(WelcomeComponent);
  userService = TestBed.get(UserService);
});

Siehe: https://angular.io/guide/testing#component-test-basics