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

105

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';
Angela P.
sumber
Anda mungkin kehilangan impor dalam file spesifikasi Anda. Saya berasumsi tes spesifikasi ada di app.spec.ts, jadi Anda pasti ingin import { NavComponent }di spec.ts Anda
Z. Bagley
1
itu diimpor. Saya melewatkan bagian deklarasi
Angela P
1
Mengimpor dan mendeklarasikan komponen khusus di dalam app.component.spec.ts berfungsi untuk saya, terima kasih teman-teman!
ENDEESA

Jawaban:

161

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 .

Kim Kern
sumber
Terima kasih ... Bekerja untuk saya !!
Hidayt Rahman
1
Terima kasih untuk ini. Saya mengalami masalah karena harus mengimpor beberapa komponen dan modul ke titik di mana lebih masuk akal untuk hanya mengimpor AppModuledalam konfigurasi TestBed. Apakah Anda akan merekomendasikan hal ini?
mcheah
@jonathan mungkin komponen yang Anda nyatakan memiliki dependensinya sendiri? Dalam tes unit, lebih baik menggunakan tiruan.
Kim Kern
8

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/

Adrian
sumber
3
apakah ada masalah potensial yang akan muncul dari ini? Sepertinya perbaikan yang mudah tetapi adakah kesalahan penting yang akan diatasi oleh ini?
mcheah
8
Inilah yang dikatakan oleh dokumen pengujian : "NO_ERRORS_SCHEMA juga mencegah kompilator untuk memberi tahu Anda tentang komponen dan atribut yang hilang yang Anda hilangkan secara tidak sengaja atau salah eja. Anda dapat membuang waktu berjam-jam untuk mengejar bug hantu yang akan ditangkap kompiler dalam sekejap."
Kim Kern
5
Anda pasti tidak ingin memperkenalkan perilaku implisit ekstra ke dalam pengujian unit Anda: menggunakan NO_ERRORS_SCHEMA akan mendorong Anda untuk menempatkan dependensi ke dalam zona 'abu-abu' antara 'mocked' dan 'pull in'. setiap perubahan pada dependensi tersebut berpotensi memicu
kerusakan
0

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.

Kailas
sumber
0

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

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();
Yuvraj Patil
sumber