Angular Karma Jasmine Error: Stato illegale: impossibile caricare il riepilogo per la direttiva

Sto sviluppando un repository github (con angular 7 e angular-cli), e ho alcuni test con Karma e Jasmine che lavorano nel ramo master.

Ora sto cercando di aggiungere la funzione di caricamento pigro, il fatto è che i test che prima venivano superati, ora non lo fanno. È divertente perché solo i test del modulo di caricamento lento falliscono ...

Ecco il codice e l'errore:

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

L'errore è questo:

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)

Puoi vedere l'intero progetto, per maggiori dettagli se ne hai bisogno.

AGGIORNAMENTO: aggiunta dichiarazione come questa:

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

Ora vengono visualizzati nuovi errori:

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

E altro ancora ... è come se tutte le direttive e i componenti del materiale angolare e il tubo translate da ngx-translate / core non sembrassero essere inclusi ...

AGGIORNATO: SOLUZIONE FINALE

Il problema era che HeroesModule non era stato importato da nessuna parte. Funziona, perché HeroesModule dichiara HeroDetailComponent, che era il problema iniziale :

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

Sei passato HeroDetailComponenta TestBed.createComponent()senza prima dichiarare il componente:

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

Spero che sia d'aiuto.

Aggiornamento per i seguenti errori nel tuo test: Aggiunte altre importazioni (prendi il tuo HeroModule come progetto perché è fondamentalmente quello che vuoi importare e fornire).

Ti mancano le dichiarazioni, devi aggiungere la classe in prova nelle dichiarazioni.

declarations: [component]

Questo tipo di errore viene generato a causa della mancanza di componenti di aggiunta nelle dichiarazioni e nei servizi nel provider di configurazione TestBed.

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

Il mio collega e io abbiamo riscontrato questo problema, ma la soluzione era molto diversa da qualsiasi altra cosa su Internet.

Stiamo usando Visual Studio Code e i nomi delle cartelle non fanno distinzione tra maiuscole e minuscole. Per questo motivo, abbiamo chiesto a tutti di utilizzare una convenzione di denominazione in minuscolo, ma alla fine un nome in maiuscolo è entrato nel controllo del codice sorgente. L'abbiamo ribattezzato, in modo indiretto, e tutto è andato bene.

Un mese dopo, il mio collega ha iniziato a ricevere un test unitario specifico per interrompere questo messaggio di errore. Solo il suo computer si era rotto in quel test. Abbiamo letteralmente commentato tutto il codice che poteva effettuare il test e abbiamo comunque ricevuto l'errore. Infine, ho cercato globalmente la classe e ci siamo resi conto che il nome della cartella era tornato al nome in maiuscolo. L'abbiamo rinominato in un nome minuscolo, senza che vengano riconosciute modifiche in sospeso, potrei aggiungere ..., e il test ha funzionato.

Che sia una lezione per seguire le guide di stile. :)

Per chiarezza, la correzione era simile alla modifica del nome della cartella FOOin foo.

devi importare il componente HeroDetailComponent nel modo giusto. Notare che anche il caso delle lettere è materia nei percorsi. cioè ("@ angular / forms" è corretto, MA "@ angular / Forms" non lo è.

Per coloro che hanno ancora problemi con questo, ho letto un problema di github separato che discuteva delle modifiche apportate dal team di Angular alla funzione di callback beforeEach.

Ecco cosa ho fatto:

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

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

L'uso di beforeAll risolve il problema. Spero che questo aiuti gli altri perché mi ci è voluto circa un giorno per risolvere questo oscuro bug.

Se vuoi testare un componente senza compilarlo, puoi dichiararlo come provider:

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

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