Angular Karma Jasmine Error: สถานะไม่ถูกต้อง: ไม่สามารถโหลดข้อมูลสรุปสำหรับคำสั่ง

ฉันกำลังพัฒนาที่เก็บ 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)

คุณสามารถดูโครงการทั้งหมดเพื่อดูรายละเอียดเพิ่มเติมหากต้องการ

UPDATE: เพิ่มการประกาศดังนี้:

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]

เพื่อนร่วมงานของฉันและฉันมีปัญหานี้ แต่การแก้ไขนั้นแตกต่างจากสิ่งอื่น ๆ บนอินเทอร์เน็ต

เรากำลังใช้ 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 อย่างถูกวิธี สังเกตว่าแม้แต่ตัวอักษรก็มีความสำคัญในเส้นทาง ie ('@ angular / form' ถูกต้องแต่ '@ angular / Forms' ไม่ใช่

สำหรับผู้ที่ยังคงมีปัญหากับสิ่งนี้ - ฉันอ่านปัญหา github แยกต่างหากที่กล่าวถึงการเปลี่ยนแปลงที่ทีม Angular ทำกับ beforeEach ฟังก์ชันการโทรกลับ

นี่คือสิ่งที่ฉันทำ:

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