Test de karma d'Angular 2 "component-name" n'est pas un élément connu

Question

Dans l'AppComponent, j'utilise le composant nav dans le code HTML. L'interface utilisateur semble bien fonctionner. Aucune erreur lors de l'exécution de ng serve. et aucune erreur dans la console lorsque je regarde l'application.

Mais quand j'ai lancé Karma pour mon projet, il y a une erreur :

Failed: Template parse errors: 
'app-nav' is not a known element:
1. If 'app-nav' is an Angular component, then verify that it is part of this module.
2. If 'app-nav' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

Dans mon app.module.ts :

il y a :

import { NavComponent } from './nav/nav.component';

Il est également dans la partie déclarations de NgModule

@NgModule({
  declarations: [
    AppComponent,
    CafeComponent,
    ModalComponent,
    NavComponent,
    NewsFeedComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    JsonpModule,
    ModalModule.forRoot(),
    ModalModule,
    NgbModule.forRoot(),
    BootstrapModalModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

J'utilise le NavComponent dans mon AppComponent

app.component.ts

import { Component, ViewContainerRef } from '@angular/core';
import { Overlay } from 'angular2-modal';
import { Modal } from 'angular2-modal/plugins/bootstrap';
import { NavComponent } from './nav/nav.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Angela';
}

app.component.html

<app-nav></app-nav>
<div class="container-fluid">
</div>

J'ai vu une question similaire, mais la réponse à cette question dit que nous devrions ajouter NgModule dans le composant nav qui a une exportation en elle, mais je reçois une erreur de compilation quand je fais cela.

Il y a aussi : app.component.spec.ts

import {NavComponent} from './nav/nav.component';
import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';

Answer 1

Étant donné que dans les tests unitaires, vous souhaitez tester le composant en grande partie isolé des autres parties de votre application, Angular n'ajoutera pas par défaut les dépendances de votre module comme les composants, les services, etc. Vous devez donc le faire manuellement dans vos tests. Fondamentalement, vous avez deux options ici :

A) Déclarer le NavComponent original dans le test

describe('AppComponent', () => {
  beforeEach(async(() => {
      TestBed.configureTestingModule({
        declarations: [
          AppComponent,
          NavComponent
        ]
      }).compileComponents();
    }));

B) Simuler le composant NavComponent

describe('AppComponent', () => {
  beforeEach(async(() => {
      TestBed.configureTestingModule({
        declarations: [
          AppComponent,
          MockNavComponent
        ]
      }).compileComponents();
    }));

// it(...) test cases 

});

@Component({
  selector: 'app-nav',
  template: ''
})
class MockNavComponent {
}

Vous trouverez de plus amples informations dans le documentation officielle .

Answer 2

Vous pouvez également utiliser NO_ERRORS_SCHEMA

describe('AppComponent', () => {
beforeEach(async(() => {
  TestBed.configureTestingModule({
    declarations: [
      AppComponent
    ],
    schemas: [NO_ERRORS_SCHEMA]
  }).compileComponents();
}));

https://2018.ng-conf.org/mocking-dependencies-angular/

Answer 3

Pour moi, l'importation du composant dans le parent a résolu le problème.

describe('AppComponent', () => {
  beforeEach(async(() => {
      TestBed.configureTestingModule({
        declarations: [
          AppComponent,
          NavComponent
        ]
      }).compileComponents();
    }));

Ajouter ceci dans spec of the parent où ce composant est utilisé.

Answer 4

Une autre source de cette erreur est constituée par les tests du composant parent, app-Root, qui incluent la balise de ce composant, app-nav.

Même si le message concerne app-nav, le composant enfant, le correctif doit être ajouté dans les tests de app-Root, le composant parent.

La solution peut être un simulacre :

app.component.spec.ts :

@Component({selector: 'app-nav', template: ''})
    class NavComponentStub {
}

Ce qui se passe, c'est que vous créez le composant Root, avec ses tests, ils passent. Plus tard, vous ajoutez le composant enfant dans la balise du composant Root et maintenant vous devez mettre à jour les tests du composant Root même si vous avez juste ajouté une balise dans le modèle.

Le message ne précise pas non plus quel test a échoué et, d'après le message, vous pourriez être amené à croire qu'il s'agit des tests du composant enfant, alors qu'il s'agit en fait des tests du parent.

Answer 5

Étape 1 : Créer des stubs au début du fichier spec.

@Component({selector: 'app-nav', template: ''})
class NavComponent{}

Étape 2 : Ajouter les stubs dans les déclarations des composants.

TestBed.configureTestingModule({
  imports: [
    RouterTestingModule
  ],
  declarations: [
    AppComponent,
    NavComponent
  ],
}).compileComponents();