javascript - Angular 2 Karma Test 'component-name' không phải là một phần tử được biết đến

Trong AppComponent, tôi đang sử dụng component nav trong mã HTML. Giao diện trông ổn. Không có lỗi khi chạy ng serve và không có lỗi trong console khi tôi xem ứng dụng.

Nhưng khi tôi chạy Karma cho dự án của mình, có một lỗi xảy ra:

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.

Trong app.module.ts của tôi:

có:

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

Nó cũng nằm trong phần khai báo của NgModule

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

Tôi đang sử dụng NavComponent trong AppComponent của mình

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>

Tôi đã thấy một câu hỏi tương tự, nhưng câu trả lời trong câu hỏi đó nói rằng chúng ta nên thêm NgModule trong thành phần nav mà trong đó có một export, nhưng tôi lại gặp lỗi biên dịch khi làm như vậy.

Cũng có: app.component.spec.ts

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

Câu trả lời #1

Bởi vì trong các bài kiểm tra đơn vị, bạn muốn kiểm tra thành phần chủ yếu tách biệt khỏi các phần khác của ứng dụng, Angular sẽ không tự động thêm các phụ thuộc của module của bạn như các thành phần, dịch vụ, v.v. theo mặc định. Vì vậy, bạn cần làm điều đó thủ công trong các bài kiểm tra của mình. Về cơ bản, bạn có hai lựa chọn ở đây:

A) Khai báo NavComponent gốc trong bài test

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

B) Giả lập NavComponent

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

// it(...) test cases 

});

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

Bạn sẽ tìm thấy nhiều thông tin hơn trong tài liệu chính thức.

Câu trả lời #2

Bạn cũng có thể sử dụng NO_ERRORS_SCHEMA

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

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