Angular Karma Jasmine Error: Keadaan ilegal: Tidak dapat memuat ringkasan untuk direktif

Saya sedang mengembangkan repositori github (dengan angular 7 dan angular-cli), dan saya memiliki beberapa tes dengan Karma dan Jasmine yang bekerja di cabang master.

Sekarang saya mencoba untuk menambahkan fitur pemuatan lambat, masalahnya adalah, bahwa tes yang sebelumnya berlalu, sekarang tidak. Ini lucu karena hanya tes dari modul lazy loading yang gagal ...

Ini kode dan kesalahannya:

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

Kesalahannya adalah ini:

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)

Anda dapat melihat keseluruhan proyek, untuk lebih jelasnya jika Anda membutuhkannya.

UPDATE: menambahkan deklarasi seperti ini:

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

Sekarang, kesalahan baru muncul:

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

Dan lebih ... ini seperti semua arahan dan komponen dari material sudut, dan terjemahan pipa dari ngx-translate / core tampaknya tidak disertakan ...

DIPERBARUI: SOLUSI AKHIR

Masalahnya adalah HeroesModule tidak diimpor ke mana pun. Ini berfungsi, karena HeroesModule mendeklarasikan HeroDetailComponent, yang merupakan masalah awal :

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

Anda meneruskan HeroDetailComponentke TestBed.createComponent()tanpa mendeklarasikan komponen terlebih dahulu:

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

Semoga membantu.

Perbarui untuk kesalahan berikut dalam pengujian Anda: Menambahkan beberapa impor lagi (cukup gunakan HeroModule Anda sebagai cetak biru karena pada dasarnya itulah yang ingin Anda impor dan sediakan).

Anda kehilangan deklarasi, Anda perlu menambahkan kelas yang diuji ke dalam deklarasi.

declarations: [component]

Jenis error ini muncul karena tidak adanya penambahan komponen dalam deklarasi dan layanan di penyedia konfigurasi TestBed.

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

Rekan kerja saya dan saya mengalami masalah ini tetapi perbaikannya jauh berbeda dari apa pun di internet.

Kami menggunakan Visual Studio Code dan nama folder tidak membedakan huruf besar / kecil. Karena itu, kami meminta semua orang untuk menggunakan konvensi penamaan huruf kecil tetapi akhirnya nama huruf besar masuk ke kontrol sumber. Kami mengganti namanya, secara tidak langsung, dan semuanya baik-baik saja.

Sebulan kemudian, rekan kerja saya mulai mendapatkan tes unit khusus untuk memecahkan pesan kesalahan ini. Hanya komputernya yang rusak pada tes itu. Kami benar-benar mengomentari semua kode yang mungkin mempengaruhi pengujian dan kami masih mendapat kesalahan. Akhirnya, saya mencari kelas secara global dan kami menyadari bahwa nama folder telah kembali ke nama huruf besar. Kami mengganti namanya kembali menjadi nama huruf kecil, tanpa perubahan tertunda yang dikenali, mungkin saya tambahkan ..., dan pengujian berhasil.

Biarlah itu menjadi pelajaran untuk mengikuti panduan gaya. :)

Untuk kejelasan, perbaikannya mirip dengan mengubah nama folder FOOmenjadi foo.

Anda harus mengimpor komponen HeroDetailComponent dengan cara yang benar. Perhatikan bahwa kasus huruf genap adalah materi dalam jalur. yaitu ('@ angular / forms' benar, TAPI '@ angular / Forms' salah.

Bagi mereka yang masih mengalami masalah dengan ini - saya membaca masalah github terpisah yang membahas perubahan yang dibuat tim Angular ke fungsi callback beforeEach.

Inilah yang saya lakukan:

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

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

Menggunakan beforeAll memperbaiki masalah. Semoga ini bisa membantu orang lain karena saya membutuhkan waktu sekitar satu hari untuk menyelesaikan masalah ini.

Jika Anda ingin menguji sebuah komponen tanpa mengompilasinya, Anda bisa dengan mendeklarasikannya sebagai penyedia:

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

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