Angular Karma Jasmine 오류 : 잘못된 상태 : 지시문에 대한 요약을로드 할 수 없습니다.

github 저장소 (angular 7 및 angular-cli 포함)를 개발 중이며 마스터 브랜치에서 작업하는 Karma 및 Jasmine에 대한 몇 가지 테스트가 있습니다.

이제 지연 로딩 기능을 추가하려고합니다. 문제는 이전에 통과 한 테스트가 지금은 그렇지 않다는 것입니다. 지연 로딩 모듈의 테스트 만 실패하기 때문에 재밌습니다 ...

다음은 코드와 오류입니다.

import {async, TestBed} from '@angular/core/testing';
import {APP_BASE_HREF} from '@angular/common';
import {AppModule} from '../../app.module';
import {HeroDetailComponent} from './hero-detail.component';

describe('HeroDetailComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [AppModule
      ],
      providers: [
        {provide: APP_BASE_HREF, useValue: '/'}
      ],
    }).compileComponents();
  }));

  it('should create hero detail component', (() => {
    const fixture = TestBed.createComponent(HeroDetailComponent);
    const component = fixture.debugElement.componentInstance;
    expect(component).toBeTruthy();
  }));
});

오류는 다음과 같습니다.

Chrome 58.0.3029 (Mac OS X 10.12.6) HeroDetailComponent should create hero detail component FAILED
    Error: Illegal state: Could not load the summary for directive HeroDetailComponent.
        at syntaxError Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/@angular/compiler/@angular/compiler.es5.js:1690:22)
        at CompileMetadataResolver.getDirectiveSummary Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/@angular/compiler/@angular/compiler.es5.js:15272:1)
        at JitCompiler.getComponentFactory Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/@angular/compiler/@angular/compiler.es5.js:26733:26)
        at TestingCompilerImpl.getComponentFactory Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/@angular/compiler/@angular/compiler/testing.es5.js:484:1)
        at TestBed.createComponent Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/@angular/core/@angular/core/testing.es5.js:874:1)
        at Function.TestBed.createComponent Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/@angular/core/@angular/core/testing.es5.js:652:1)
        at UserContext.it Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/src/app/heroes/hero-detail/hero-detail.component.spec.ts:18:29)
        at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/zone.js/dist/zone.js:391:1)
        at ProxyZoneSpec.onInvoke Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/zone.js/dist/proxy.js:79:1)
        at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/zone.js/dist/zone.js:390:1)

필요한 경우 자세한 내용은 전체 프로젝트를 볼 수 있습니다.

업데이트 : 다음과 같은 추가 선언 :

beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        AppModule
      ],
      declarations: [HeroDetailComponent],
      providers: [
        {provide: APP_BASE_HREF, useValue: '/'}
      ],
    }).compileComponents();
  }));

이제 새로운 오류가 나타납니다.

The pipe 'translate' could not be found ("<h1 class="section-title">{{[ERROR ->]'heroDetail' | translate}}</h1>
    <md-progress-spinner *ngIf="!hero"
                         class="progre"): ng:///DynamicTestModule/HeroDetailComponent.html@0:28
    Can't bind to 'color' since it isn't a known property of 'md-progress-spinner'.

그리고 더 ... 각진 재료의 모든 지시문 및 구성 요소와 같으며 ngx-translate / core에서 변환되는 파이프는 포함되지 않은 것으로 보입니다.

업데이트 됨 : 최종 솔루션

문제는 HeroesModule이 어디에도 임포트되지 않았다는 것입니다. 이것은 HeroesModule이 초기 문제였던 HeroDetailComponent를 선언하기 때문에 작동합니다 .

import {async, TestBed} from '@angular/core/testing';
import {APP_BASE_HREF} from '@angular/common';
import {AppModule} from '../../app.module';
import {HeroDetailComponent} from './hero-detail.component';
import {HeroesModule} from '../heroes.module';

describe('HeroDetailComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        AppModule,
        HeroesModule
      ],
      providers: [
        {provide: APP_BASE_HREF, useValue: '/'}
      ],
    }).compileComponents();
  }));

  it('should create hero detail component', (() => {
    const fixture = TestBed.createComponent(HeroDetailComponent);
    const component = fixture.debugElement.componentInstance;
    expect(component).toBeTruthy();
  }));
});

구성 요소를 먼저 선언하지 않고에 전달 HeroDetailComponent했습니다 TestBed.createComponent().

TestBed.configureTestingModule({
  imports: [AppModule,
     CommonModule,
     FormsModule,
     SharedModule,
     HeroRoutingModule,
     ReactiveFormsModule
  ],
  providers: [
    {provide: APP_BASE_HREF, useValue: '/'}
  ],
  declarations: [HeroDetailComponent]
}).compileComponents();

도움이되기를 바랍니다.

테스트에서 다음 오류에 대한 업데이트 : 더 많은 가져 오기가 추가되었습니다 (기본적으로 가져 와서 제공하려는 것이기 때문에 HeroModule을 청사진으로 사용하십시오).

선언이 누락되었습니다. 테스트중인 클래스를 선언에 추가해야합니다.

declarations: [component]

이러한 유형의 오류는 TestBed 구성 공급자의 선언 및 서비스에 추가 구성 요소가 누락되어 발생합니다.

beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [RouterTestingModule.withRoutes([
        { path: 'home', component: DummyComponent },
        { path: 'patients/find', component: DummyComponent }
      ])],
      declarations: [RoutingComponent, DummyComponent,BreadcrumbComponent],
      providers : [BreadCrumbService]
    });

제 동료와 저는이 문제가 있었지만 수정은 인터넷의 다른 것과는 많이 달랐습니다.

Visual Studio Code를 사용하고 있으며 폴더 이름은 대소 문자를 구분하지 않습니다. 그 때문에 우리는 모든 사람들에게 소문자 명명 규칙을 사용하도록 요청했지만 결국 대문자 이름이 소스 제어에 들어갔습니다. 우리는 원형 교차로 방식으로 이름을 변경했으며 모든 것이 정상이었습니다.

한 달 후, 동료는이 오류 메시지와 함께 중단하기 위해 특정 단위 테스트를 시작했습니다. 그의 컴퓨터 만이 그 시험을 깨고있었습니다. 테스트에 영향을 미칠 수있는 모든 코드를 말 그대로 주석 처리했지만 여전히 오류가 발생했습니다. 마지막으로 클래스를 전체적으로 검색 한 결과 폴더 이름이 대문자 이름으로 되돌아 갔다는 것을 알았습니다. 보류중인 변경 사항이 인식되지 않고 다시 소문자 이름으로 변경되었습니다 ...

스타일 가이드를 따르는 교훈이 되십시오. :)

명확성을 위해 수정은 폴더 이름 FOO을 foo.

구성 요소 HeroDetailComponent 를 올바른 방법으로 가져와야합니다 . 공지 사항 문자의 경우에도이 경로에 문제가 있음. 즉 ( '@ angular / forms'는 정확 하지만 '@ angular / Forms'는 올바르지 않습니다.

여전히 문제가있는 사람들을 위해-Angular 팀이 beforeEach 콜백 함수에 적용한 변경 사항에 대해 논의한 별도의 github 문제를 읽었습니다.

내가 한 일은 다음과 같습니다.

beforeAll(async(() => {
    TestBed.configureTestingModule({
        declarations: [BannerNotificationComponent]
    }).compileComponents()

    fixture = TestBed.createComponent(BannerNotificationComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
}));

beforeAll을 사용하면 문제가 해결됩니다. 이 모호한 버그를 해결하는 데 약 하루가 걸렸으므로 다른 사람들에게 도움이되기를 바랍니다.

컴파일하지 않고 구성 요소를 테스트하려면 공급자로 선언하면됩니다.

beforeEach(() => {
  TestBed.configureTestingModule({
    // provide the component-under-test and dependent service
    providers: [
      WelcomeComponent,
      { provide: UserService, useClass: MockUserService }
    ]
  });
  // inject both the component and the dependent service.
  comp = TestBed.get(WelcomeComponent);
  userService = TestBed.get(UserService);
});

참조 : https://angular.io/guide/testing#component-test-basics