Erreur Angular Karma Jasmine : État illégal : Impossible de charger le résumé de la directive

Question

Je suis en train de développer un Dépôt Github (avec angular 7 et angular-cli), et j'ai quelques tests avec Karma et Jasmine qui fonctionnent dans la branche master.

J'essaie maintenant d'ajouter la fonction de chargement paresseux, mais les tests qui passaient avant ne passent plus maintenant. C'est drôle parce que seuls les tests du module de chargement paresseux échouent...

Voici le code et l'erreur :

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'erreur est la suivante :

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)

Vous pouvez voir l'ensemble du projet, pour plus de détails si vous en avez besoin.

MISE À JOUR : ajout d'une déclaration comme celle-ci :

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

Maintenant, de nouvelles erreurs apparaissent :

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

Et plus encore... c'est comme si toutes les directives et composants de angular material, et le pipe translate de ngx-translate/core ne semblent pas être inclus...

MISE À JOUR : SOLUTION FINALE

Le problème était que HeroesModule n'était importé nulle part. Cela fonctionne, car HeroesModule déclare HeroDetailComponent, ce qui était le problème initial. :

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

Answer 1

Tu as réussi HeroDetailComponent a TestBed.createComponent() sans déclarer le composant au préalable :

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

J'espère que cela vous aidera.

---

Mise à jour pour les erreurs suivantes dans votre test : Ajout de quelques importations supplémentaires (prenez simplement votre HeroModule comme modèle parce que c'est fondamentalement ce que vous voulez importer et fournir).

Answer 2

Il vous manque les déclarations, vous devez ajouter la classe testée dans les déclarations.

declarations: [component]

Answer 3

Mon collègue et moi avons eu ce problème, mais la solution était bien différente de tout ce que l'on trouve sur Internet.

Nous utilisons Visual Studio Code et les noms de dossiers sont insensibles à la casse. Pour cette raison, nous avons demandé à tout le monde d'utiliser une convention de dénomination en minuscules, mais un nom en majuscules a fini par entrer dans le contrôle des sources. Nous l'avons renommé, de manière détournée, et tout est rentré dans l'ordre.

Un mois plus tard, mon collègue a commencé à faire échouer un test unitaire spécifique avec ce message d'erreur. Seul son ordinateur tombait en panne lors de ce test. Nous avons littéralement commenté tout le code qui pouvait affecter le test et nous obtenions toujours l'erreur. Finalement, j'ai effectué une recherche globale de la classe et nous avons réalisé que le nom du dossier était redevenu une majuscule. Nous l'avons renommé en minuscules, sans que les modifications en cours ne soient reconnues, si je puis dire..., et le test a fonctionné.

Que cela serve de leçon pour suivre les guides de style :)

Pour plus de clarté, la solution consiste à changer le nom du dossier. FOO a foo .

Answer 4

Ce type d'erreur est dû à l'absence d'ajout de composant dans les déclarations et les services dans le fournisseur de la configuration TestBed.

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

Answer 5

Vous devez importer le composant HeroDetailComponent de la bonne manière. Avis que même la casse des lettres est importante dans les chemins, c'est-à-dire que "@angular/forms" est correct, MAIS @angular/Forms' ne l'est pas.