Angular 2 Karma Test 'component-name' bukan elemen yang diketahui

Di AppComponent, saya menggunakan komponen nav di kode HTML. UI terlihat bagus. Tidak ada kesalahan saat melakukan servis. dan tidak ada kesalahan di konsol saat saya melihat aplikasi.

Tetapi ketika saya menjalankan Karma untuk proyek saya, ada kesalahan:

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.

Di app.module.ts saya :

ada:

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

Itu juga ada di bagian deklarasi NgModule

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

Saya menggunakan NavComponentdi sayaAppComponent

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>

Saya telah melihat pertanyaan serupa, tetapi jawaban dalam pertanyaan itu mengatakan kita harus menambahkan NgModule di komponen nav yang memiliki ekspor di dalamnya, tetapi saya mendapatkan kesalahan kompilasi ketika saya melakukan itu.

Ada juga: app.component.spec.ts

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

Karena dalam pengujian unit Anda ingin menguji komponen yang sebagian besar diisolasi dari bagian lain aplikasi Anda, Angular tidak akan menambahkan dependensi modul Anda seperti komponen, layanan, dll secara default. Jadi, Anda perlu melakukannya secara manual dalam pengujian Anda. Pada dasarnya, Anda memiliki dua opsi di sini:

A) Nyatakan NavComponent asli dalam pengujian

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 {
}

Anda akan menemukan informasi lebih lanjut di dokumentasi resmi .

Anda juga bisa menggunakan NO_ERRORS_SCHEMA

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

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

Bagi saya mengimpor komponen di induk menyelesaikan masalah.

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

Tambahkan ini di spec of the parenttempat komponen ini digunakan.

Satu alasan lagi adalah mungkin ada beberapa .compileComponents()untuk beforeEach()dalam kasus uji Anda

untuk mis

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

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

Langkah 1: Buat stub di awal file spesifikasi.

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

Langkah 2: Tambahkan stub di deklarasi komponen.

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