Angular 2 Karma Test 'tên-thành phần' không phải là một phần tử đã biết

Trong AppComponent, tôi đang sử dụng thành phần nav trong mã HTML. Giao diện người dùng trông ổn. Không có lỗi khi thực hiện ng giao bóng. và không có lỗi trong bảng điều khiển 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:

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 NavComponenttrongAppComponent

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 điều hướng có xuất trong đó, nhưng tôi gặp lỗi biên dịch khi làm điều đó.

Ngoài ra còn có: app.component.spec.ts

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

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 được tách biệt khỏi các phần khác của ứng dụng, Angular sẽ không thêm các phụ thuộc vào mô-đun 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 đó theo cách thủ công trong các thử nghiệm của mình. Về cơ bản, bạn có hai tùy chọn ở đây:

A) Khai báo NavComponent ban đầu trong thử nghiệm

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

B) Chế nhạo 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 thêm thông tin trong tài liệu chính thức .

Bạn cũng có thể 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/

Đối với tôi nhập thành phần trong cha đã giải quyết vấn đề.

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

Thêm điều này vào spec of the parentnơi thành phần này được sử dụng.

Một lý do nữa là có thể có nhiều .compileComponents()cho beforeEach()trong trường hợp thử nghiệm của bạn

ví dụ

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

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

Bước 1: Tạo sơ khai ở đầu tệp đặc tả.

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

Bước 2: Thêm sơ khai trong khai báo của thành phần.

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