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

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]
    });

---

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

We are using Visual Studio Code and the folder names are case insensitive. Because of that, we asked everyone to use a lowercase naming convention but eventually an uppercase name got into source control. We renamed it, in a roundabout way, and everything was fine.

A month later, my coworker started getting a specific unit test to break with this error message. Only his computer was breaking on that test. We literally commented out all the code that could possible be effecting the test and we still got the error. Finally, I globally searched for the class and we realized that the folder name had reverted back to the uppercase name. We renamed it back to a lowercase name, with no pending changes recognized might I add..., and the test worked.

Let that be a lesson to follow style guides. :)

For clarity, the fix was similar to changing the folder name FOO to foo.

---

you must import the component HeroDetailComponent in the right way. Notice that even case of letters is matter in paths. i.e ('@angular/forms' is correct, BUT'@angular/Forms' is not.

---

If you want to test a component without compiling it then you can by declaring it as a provider:

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);
});

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

참고URL : https://stackoverflow.com/questions/45584957/angular-karma-jasmine-error-illegal-state-could-not-load-the-summary-for-direc