Angular 2 Karma Test 'Komponentenname' ist kein bekanntes Element

In der AppComponent verwende ich die nav-Komponente im HTML-Code. Die Benutzeroberfläche sieht gut aus. Keine Fehler beim Aufschlag. und keine Fehler in der Konsole, wenn ich mir die App ansehe.

Aber als ich Karma für mein Projekt ausgeführt habe, ist ein Fehler aufgetreten:

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.

In meiner app.module.ts :

es gibt:

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

Es ist auch in den Deklarationen Teil von NgModule

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

Ich benutze das NavComponentin meinemAppComponent

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>

Ich habe eine ähnliche Frage gesehen, aber die Antwort in dieser Frage besagt, dass wir NgModule in die Navigationskomponente einfügen sollten, die einen Export enthält, aber ich erhalte dabei einen Kompilierungsfehler.

Es gibt auch: app.component.spec.ts

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

Da Sie in Komponententests die Komponente testen möchten, die größtenteils von anderen Teilen Ihrer Anwendung isoliert ist, fügt Angular die Abhängigkeiten Ihres Moduls wie Komponenten, Dienste usw. standardmäßig nicht hinzu. Sie müssen dies also manuell in Ihren Tests tun. Grundsätzlich haben Sie hier zwei Möglichkeiten:

A) Deklarieren Sie die ursprüngliche NavComponent im Test

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

B) Verspotten Sie die NavComponent

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

// it(...) test cases 

});

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

Weitere Informationen finden Sie in der offiziellen Dokumentation .

Sie können auch verwenden NO_ERRORS_SCHEMA

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

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

Für mich hat das Importieren der Komponente in das übergeordnete Element das Problem behoben.

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

Fügen Sie dies dort hinzu, spec of the parentwo diese Komponente verwendet wird.

Ein weiterer Grund ist , dass es können mehrere sein .compileComponents()für beforeEach()in Ihrem Testfall

für zB

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

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

Schritt 1: Erstellen Sie Stubs am Anfang der Spezifikationsdatei.

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

Schritt 2: Fügen Sie Stubs in die Deklarationen der Komponente ein.

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