Angular 2 Karma Test "nome-componente" non è un elemento noto

In AppComponent, sto usando il componente nav nel codice HTML. L'interfaccia utente sembra a posto. Nessun errore durante l'esecuzione del servizio. e nessun errore nella console quando guardo l'app.

Ma quando ho eseguito Karma per il mio progetto, si è verificato un errore:

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.

Nella mia app.module.ts :

c'è:

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

È anche nella parte delle dichiarazioni di NgModule

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

Sto usando NavComponentnel mioAppComponent

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>

Ho visto una domanda simile, ma la risposta in quella domanda dice che dovremmo aggiungere NgModule nel componente nav che ha un'esportazione in quello, ma ricevo un errore di compilazione quando lo faccio.

C'è anche: app.component.spec.ts

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

Poiché negli unit test vuoi testare il componente per lo più isolato da altre parti della tua applicazione, Angular non aggiungerà le dipendenze del tuo modulo come componenti, servizi, ecc. Per impostazione predefinita. Quindi devi farlo manualmente nei tuoi test. Fondamentalmente, hai due opzioni qui:

A) Dichiarare il NavComponent originale nel test

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

B) Mock the NavComponent

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

// it(...) test cases 

});

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

Troverai maggiori informazioni nella documentazione ufficiale .

Puoi anche usare NO_ERRORS_SCHEMA

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

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

Per me l'importazione del componente nel genitore ha risolto il problema.

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

Aggiungi questo nel spec of the parentpunto in cui viene utilizzato questo componente.

Un motivo in più è che nel tuo caso di test possono esserci più .compileComponents()perbeforeEach()

per es

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

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

Passaggio 1: crea stub all'inizio del file delle specifiche.

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

Passaggio 2: aggiungi stub nelle dichiarazioni del componente.

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