Angular 2 Karma Test 'nom-composant' n'est pas un élément connu

Dans AppComponent, j'utilise le composant nav dans le code HTML. L'interface utilisateur a l'air bien. Aucune erreur lors du service ng. et aucune erreur dans la console lorsque je regarde l'application.

Mais lorsque j'ai exécuté 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';

C'est aussi 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 NavComponentdans monAppComponent

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 contient une exportation, mais j'obtiens une erreur de compilation lorsque je fais cela.

Il existe également: app.component.spec.ts

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

Parce que dans les tests unitaires, vous souhaitez tester le composant principalement isolé des autres parties de votre application, Angular n'ajoutera pas les dépendances de votre module telles que les composants, les services, etc. par défaut. Vous devez donc le faire manuellement dans vos tests. En gros, vous avez deux options ici:

A) Déclarez le NavComponent d'origine dans le test

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

B) Simulez le NavComponent

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

// it(...) test cases 

});

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

Vous trouverez plus d'informations dans la documentation officielle .

Vous pouvez aussi 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/

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

Ajoutez-le là spec of the parentoù ce composant est utilisé.

Une autre raison est qu'il peut y avoir plusieurs .compileComponents()pour beforeEach()dans votre cas de test

par exemple

beforeEach(async(() => {
  TestBed.configureTestingModule({
    declarations: [TestComponent]
  }).compileComponents();
}));

beforeEach(() => {
  TestBed.configureTestingModule({
    imports: [HttpClientModule],
    declarations: [Test1Component],
    providers: [HttpErrorHandlerService]
  }).compileComponents();
});

Étape 1: Créez des stubs au début du fichier de spécifications.

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

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

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