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-delt/core에서 변환된 파이프는 포함되지 않은 것 같습니다.

합격했습니다HeroDetailComponent로.TestBed.createComponent()구성 요소를 먼저 선언하지 않고:

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

---

테스트에서 다음 오류에 대한 업데이트:몇 가지 가져오기 추가(기본적으로 가져오고 제공하려는 것이 HeroModule이므로 청사진으로 가져가기만 하면 됩니다).

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

declarations: [component]

제 동료와 저는 이 문제를 겪었지만 해결책은 인터넷의 다른 어떤 것과도 매우 달랐습니다.

Visual Studio Code를 사용하고 있으며 폴더 이름은 대소문자를 구분하지 않습니다.그 때문에 우리는 모두에게 소문자 명명 규칙을 사용하도록 요청했지만 결국 대문자 이름이 소스 제어에 들어가게 되었습니다.우리는 우회적으로 그것의 이름을 바꿨고 모든 것이 괜찮았습니다.

한 달 후, 제 동료는 이 오류 메시지를 깨기 위해 특정 단위 테스트를 받기 시작했습니다.그 시험에서 그의 컴퓨터만 고장이 났습니다.우리는 말 그대로 테스트에 영향을 미칠 수 있는 모든 코드를 코멘트화했지만 여전히 오류가 발생했습니다.마지막으로, 저는 전세계적으로 클래스를 검색했고 우리는 폴더 이름이 대문자 이름으로 되돌아갔다는 것을 깨달았습니다.이름을 다시 소문자 이름으로 바꿨습니다. 보류 중인 변경 사항은 인식되지 않습니다. 추가할 수 있습니다... 그리고 테스트가 성공했습니다.

이것이 스타일 가이드를 따르는 교훈이 될 것입니다.:)

명확한 설명을 위해 수정은 폴더 이름을 변경하는 것과 유사했습니다.FOOfoo.

TestBed 구성 공급자의 선언 및 서비스에 구성 요소를 추가하지 못해 발생한 오류 유형입니다.

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

올바른 방법으로 HeroDetailComponent 구성 요소를 가져와야 합니다.문자의 경우도 경로의 문제입니다. 즉, '@angular/forms'는 맞지만 '@angular/Forms'는 그렇지 않습니다.

아직도 이 문제에 문제가 있는 분들을 위해 각 팀이 각 콜백 함수 이전에 수행한 변경 사항에 대해 논의한 별도의 github 이슈를 읽었습니다.

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

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

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

모두 앞에서 사용하면 문제가 해결됩니다.이 모호한 버그를 해결하는 데 약 하루가 걸렸기 때문에 이것이 다른 사람들에게 도움이 되기를 바랍니다.

질문에서 복사된 답변입니다.

문제는 Heroes Module이 어디에서도 수입되지 않았다는 것입니다.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();
  }));
});

구성 요소를 컴파일하지 않고 테스트하려면 해당 구성 요소를 제공자로 선언하여 다음을 수행할 수 있습니다.

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

잘못된 모듈을 테스트 스위트로 가져왔습니다! 어떤 모듈을 가져왔는지 수정하여 이 오류를 해결했습니다.

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