각도 2 카르마 검정 '구성 요소 이름'이(가) 알려진 요소가 아닙니다.

각도 2 카르마 검정 '구성 요소 이름'이(가) 알려진 요소가 아닙니다.

App Component에서는 HTML 코드의 nav component를 사용하고 있습니다.UI는 정상적으로 표시된다.ng serve 실행 시 오류가 발생하지 않으며 앱을 볼 때 콘솔에 오류가 발생하지 않습니다.

하지만 프로젝트를 위해 카르마를 실행했을 때 오류가 발생했습니다.

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.module

<app-nav></app-nav>
<div class="container-fluid">
</div>

비슷한 질문을 본 적이 있습니다만, 그 질문의 답변은 내보내기 기능이 있는 내비게이션 컴포넌트에 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) 테스트에서 원래 Nav Component를 선언합니다.

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

B) Nav Component를 모의합니다.

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/

저는 부모에 컴포넌트를 Import하여 문제를 해결했습니다.

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: 스펙 파일의 선두에 stub를 작성합니다.

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

2단계: 컴포넌트 선언에 stub를 추가합니다.

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

이 오류의 또 다른 원인은 이 구성 요소인 app-nav의 태그를 포함하는 상위 구성 요소인 app-root에 대한 테스트입니다.

메시지가 하위 구성요소인 app-nav에 대한 것이더라도 상위 구성요소인 app-root 테스트에 수정 사항을 추가해야 합니다.

수정은 모의일 수 있습니다.

app.component.spec.ts:

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

루트 컴포넌트를 생성하여 테스트를 통과합니다.나중에 루트 구성 요소 태그에 하위 구성 요소를 추가하면 템플릿에 태그를 추가한 경우에도 루트 구성 요소 테스트를 업데이트해야 합니다.

또한 메시지에는 어떤 테스트가 실패했는지는 나와 있지 않으며 메시지를 통해 하위 구성 요소의 테스트라고 믿을 수 있습니다. 실제로는 하위 구성 요소의 테스트입니다.

stub을 생성했는데도 같은 오류가 나타나는 경우 --watch 모드가 켜져 있을 수 있습니다.그걸 멈추고 다시 도망가 보세요.

언급URL : https://stackoverflow.com/questions/44504468/angular-2-karma-test-component-name-is-not-a-known-element