[javascript] Angular 2 Karma 테스트 'component-name'은 알려진 요소가 아닙니다.

AppComponent에서는 HTML 코드의 nav 구성 요소를 사용하고 있습니다. UI가 괜찮아 보입니다. ng 서브를 할 때 오류가 없습니다. 앱을 볼 때 콘솔에 오류가 없습니다.

하지만 내 프로젝트를 위해 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>

나는 비슷한 질문을 보았지만 그 질문에 대한 대답은 내보내기가있는 nav 구성 요소에 NgModule을 추가해야한다고 말하지만 그렇게하면 컴파일 오류가 발생합니다.

또한 : app.component.spec.ts

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

답변

단위 테스트에서는 애플리케이션의 다른 부분에서 대부분 격리 된 구성 요소를 테스트하려고하기 때문에 Angular는 기본적으로 구성 요소, 서비스 등과 같은 모듈의 종속성을 추가하지 않습니다. 따라서 테스트에서 수동으로 수행해야합니다. 기본적으로 여기에는 두 가지 옵션이 있습니다.

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 {
}

공식 문서 에서 자세한 정보를 찾을 수 있습니다 .

답변

당신은 또한 사용할 수 있습니다 NO_ERRORS_SCHEMA

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

https://2018.ng-conf.org/mocking-dependencies-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();