Кутовий тест Карми 2 "Ім'я компонента" не є відомим елементом

У AppComponent я використовую компонент nav у HTML-коді. Інтерфейс виглядає добре. Немає помилок при виконанні подачі. і жодних помилок у консолі під час перегляду програми.

Але коли я керував Кармою для свого проекту, виникла помилка:

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.

У моєму app.module.ts :

існує:

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

Він також є в частині декларацій NgModule

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

Я використовую NavComponentв моємуAppComponent

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>

Я бачив подібне запитання, але відповідь на це питання говорить, що ми повинні додати NgModule в компонент nav, який має експорт у цьому, але я отримую помилку компіляції, коли це роблю.

Також є: app.component.spec.ts

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

Оскільки в одиничних тестах ви хочете протестувати компонент, здебільшого ізольований від інших частин програми, Angular за замовчуванням не додасть залежності вашого модуля, як компоненти, послуги тощо. Тому вам потрібно зробити це вручну під час тестів. В основному, у вас є два варіанти тут:

А) Зазначте вихідний NavComponent у тесті

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

В) Знущайтеся над NavComponent

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

// it(...) test cases 

});

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

Більше інформації ви знайдете в офіційній документації .

Ви також можете використовувати NO_ERRORS_SCHEMA

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

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

Для мене імпорт компонента у батьківській програмі вирішив проблему.

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

Додайте його spec of the parentтуди, де використовується цей компонент.

Ще одна причина полягає в тому , що там може бути кілька .compileComponents()для beforeEach()вашої тесту

напр

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

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

Крок 1: Створіть заглушки на початку файла специфікації.

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

Крок 2. Додайте заглушки в декларації компонента.

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