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

98

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();
  }));
});
javascript  angular  karma-runner  karma-jasmine  angular-cli 
— ismaestro
sumber
1
Anda tidak perlu mendeklarasikan komponen untuk mengujinya, Anda hanya perlu mengatur test bed sedikit berbeda: github.com/angular/angular/issues/17477#issuecomment-510397690
— Stevanicus

Jawaban:

179

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

— lexith
sumber
Jika saya menambahkan deklarasi itu, maka lebih banyak kesalahan muncul. Saya perbarui infonya, Anda bisa lihat di atas.
— ismaestro
1
Nah, tapi begitulah cara Anda menghilangkan kesalahan ini. Kesalahan berikut mungkin merupakan masalah lain dengan pengaturan pengujian Anda.
— lexith
Kesalahan apa yang terjadi selanjutnya?
— lexith
Pipa 'translate' tidak dapat ditemukan ("<h1 class =" section-title "> {{[ERROR ->] 'heroDetail' | translate}} </h1> <md-progress-spinner * ngIf ="! hero "class =" progre "): ng: ///DynamicTestModule/HeroDetailComponent.html@0: 28 Tidak dapat mengikat ke 'color' karena ini bukan properti yang diketahui dari 'md-progress-spinner'.
— ismaestro
Dan jangan lupa, ini terjadi karena ini adalah modul pemuatan lambat. Karena tes lain yang saya miliki tidak gagal ...
— ismaestro
8

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

declarations: [component]
— Akash Yellappa
sumber
Dalam kasus saya, saya menyalin konfigurasi TestBed dari satu komponen ke yang baru dan, kemudian, saya tidak menyertakan komponen yang sedang diuji.
— Tonatio
2

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]
    });
— Vijay Barot
sumber
2

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.

— christo8989
sumber
1

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.

— sami
sumber
1

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.

— Adam P.
sumber
0

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

— Stevanicus
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.