[解決済み] Angular 2 Karma Test 'component-name' は既知の要素ではありません。

質問

AppComponentで、HTMLコードにnavコンポーネントを使用しています。UIは問題なく表示されています。ng serve.をしてもエラーは出ませんし、アプリを見てもコンソールでエラーは出ません。

しかし、私のプロジェクトでKarmaを実行すると、エラーが発生します。

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>

同じような質問を見たことがあるのですが、その質問の回答では、その中にexportがあるナビコンポーネントにNgModuleを追加すればいいとありますが、それをやるとコンパイルエラーになります。

もあります。 app.component.spec.ts

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

どのように解決するのですか？

ユニットテストでは、アプリケーションの他の部分からほとんど分離されたコンポーネントをテストしたいので、Angularはデフォルトでコンポーネント、サービスなどのモジュールの依存関係を追加しません。そのため、テストの中で手動で追加する必要があります。基本的に、ここには2つのオプションがあります。

A) テストでオリジナルのNavComponentを宣言する

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

B) NavComponentのモック

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

// it(...) test cases 

});

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

より詳細な情報は 公式ドキュメント .