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

Lesezeit: 3 Minuten

Benutzer-Avatar
Ismaestro

Ich entwickle eine Github-Repository (mit Angular 7 und Angle-Cli), und ich habe einige Tests mit Karma und Jasmine, die im Master-Zweig arbeiten.

Jetzt versuche ich, eine Lazy-Loading-Funktion hinzuzufügen, die Sache ist, dass die Tests, die vorher bestanden haben, jetzt nicht mehr funktionieren. Es ist lustig, weil nur die Tests des Lazy-Loading-Moduls fehlschlagen …

Hier 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: "https://stackoverflow.com/"}
      ],
    }).compileComponents();
  }));

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

Der Fehler ist dieser:

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 sehen, für weitere Details, falls Sie es brauchen.

UPDATE: Deklaration wie folgt hinzugefügt:

beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        AppModule
      ],
      declarations: [HeroDetailComponent],
      providers: [
        {provide: APP_BASE_HREF, useValue: "https://stackoverflow.com/"}
      ],
    }).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/[email protected]:28
    Can't bind to 'color' since it isn't a known property of 'md-progress-spinner'.

Und mehr … es ist, als ob alle Anweisungen und Komponenten aus eckigem Material und die Pipe-Übersetzung von ngx-translate/core nicht enthalten zu sein scheinen …

  • Sie müssen die Komponente nicht deklarieren, um sie zu testen, Sie müssen nur die Testumgebung etwas anders einrichten: github.com/angular/angular/issues/17477#issuecomment-510397690

    – Stevanicus

    11. Juli 2019 um 9:01 Uhr

  • Anstelle von “AKTUALISIERT: ENDGÜLTIGE LÖSUNG” posten Sie bitte eine Selbstantwort, damit Ihre Frage klar von der Lösung abgegrenzt ist und die Lösung zusammen mit allen anderen möglichen Lösungen nach oben/unten abgestimmt werden kann.

    – ggorlen

    27. Oktober 2020 um 23:19 Uhr

  • Ich habe die Antwort aus Ihrer Frage als tatsächliche Antwort hinzugefügt. Wenn Sie dies nach Aufforderung selbst tun möchten, lassen Sie es mich bitte wissen und ich werde mein Wiki löschen

    – Liam

    11. August 2021 um 16:01 Uhr

Benutzer-Avatar
Malifa

Du hast bestanden HeroDetailComponent zu TestBed.createComponent() ohne die Komponente zuerst zu deklarieren:

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

Ich hoffe es hilft.


Update für folgende Fehler in Ihrem Test: Einige weitere Importe hinzugefügt (nehmen Sie einfach Ihr HeroModule als Blaupause, denn das ist im Grunde das, was Sie importieren und bereitstellen möchten).

  • Wenn ich diese Deklaration hinzufüge, werden weitere Fehler angezeigt. Ich habe die Informationen aktualisiert, Sie können sie oben sehen.

    – ismaestro

    9. August 2017 um 9:08 Uhr


  • Nun, aber so werden Sie diesen Fehler los. Die folgenden Fehler könnten ein weiteres Problem mit Ihrem Testaufbau sein.

    – Malifa

    9. August 2017 um 9:10 Uhr

  • Welcher Fehler kommt als nächstes?

    – Malifa

    9. August 2017 um 9:14 Uhr


  • Die Pipe ‘translate’ konnte nicht gefunden werden (“

    {{[ERROR ->]’HeroDetail’ | translate}}

    – ismaestro

    9. August 2017 um 9:15 Uhr

  • Und vergessen Sie nicht, dass dies geschieht, weil es sich um ein Lazy-Loading-Modul handelt. Weil die anderen Tests, die ich habe, nicht fehlschlagen…

    – ismaestro

    9. August 2017 um 9:15 Uhr

Benutzer-Avatar
Akash Yellapa

Ihnen fehlen die Deklarationen, Sie müssen die zu testende Klasse in die Deklarationen einfügen.

declarations: [component]

  • In meinem Fall habe ich die Konfiguration von TestBed von einer Komponente in die neue kopiert und dann die zu testende Komponente nicht eingeschlossen.

    – Tonatio

    22. Oktober 2019 um 13:01 Uhr

Mein Kollege und ich hatten dieses Problem, aber die Lösung war ganz anders als alles andere im Internet.

Wir verwenden Visual Studio Code und bei den Ordnernamen wird die Groß-/Kleinschreibung nicht beachtet. Aus diesem Grund haben wir alle gebeten, eine Namenskonvention in Kleinbuchstaben zu verwenden, aber schließlich gelangte ein Name in Großbuchstaben in die Quellcodeverwaltung. Wir haben es auf Umwegen umbenannt, und alles war in Ordnung.

Einen Monat später begann mein Kollege, einen bestimmten Komponententest zu erhalten, um mit dieser Fehlermeldung zu brechen. Nur sein Computer ging bei diesem Test kaputt. Wir haben buchstäblich den gesamten Code auskommentiert, der möglicherweise den Test beeinflusst, und wir haben den Fehler immer noch erhalten. Schließlich suchte ich global nach der Klasse und wir stellten fest, dass der Ordnername wieder auf den Großbuchstaben zurückgekehrt war. Wir haben es wieder in einen Kleinbuchstaben umbenannt, ohne dass ausstehende Änderungen erkannt wurden, wenn ich hinzufügen darf …, und der Test hat funktioniert.

Lassen Sie das eine Lektion sein, um Stilrichtlinien zu folgen. 🙂

Aus Gründen der Übersichtlichkeit ähnelte die Fehlerbehebung dem Ändern des Ordnernamens FOO zu foo.

Diese Art von Fehler wurde aufgrund fehlender Hinzufügungskomponenten in Deklarationen und Diensten im Anbieter der TestBed-Konfiguration ausgelöst.

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

Sie müssen die Komponente importieren HeroDetailComponent auf die richtige Art und Weise. Notiz dass sogar Buchstaben Materie in Pfaden sind. dh (“@angular/forms” ist richtig, ABER‘@angular/Forms’ ist es nicht.

Benutzer-Avatar
Adam P

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-Callback-Funktion 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.

Antwort außer Frage kopiert

Das Problem war, dass HeroesModule nirgendwo importiert wurde. Das funktioniert, weil 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: "https://stackoverflow.com/"}
      ],
    }).compileComponents();
  }));

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

1246600cookie-checkAngular Karma Jasmine Fehler: Unzulässiger Status: Die Zusammenfassung für die Richtlinie konnte nicht geladen werden

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy