Açısal Karma Jasmine Hatası: Geçersiz durum: Yönerge için özet yüklenemedi

104

Bir github deposu geliştiriyorum (açısal 7 ve açısal-cli ile) ve ana dalda çalışan Karma ve Jasmine ile bazı testlerim var.

Şimdi tembel yükleme özelliği eklemeye çalışıyorum, mesele şu ki, daha önce geçtiği testler, şimdi geçmiyor. Komik çünkü sadece tembel yükleme modülünden gelen testler başarısız oluyor ...

İşte kod ve hata:

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

Hata şudur:

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)

İhtiyacınız olursa daha fazla ayrıntı için tüm projeyi görebilirsiniz.

GÜNCELLEME: aşağıdaki gibi bildirim eklendi:

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

Şimdi yeni hatalar belirir:

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

Ve dahası ... açısal malzemeden gelen tüm direktifler ve bileşenler gibi ve ngx-translate / core'den çevrilen boru dahil görünmüyor ...

GÜNCELLENDİ: NİHAİ ÇÖZÜM

Sorun, HeroesModule'ün hiçbir yere aktarılmamış olmasıydı. HeroesModule, ilk sorun olan HeroDetailComponent'i bildirdiği için bu işe yarar :

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
kaynak
1
Bunu test etmek için bileşeni ilan etmek gerekmez, sadece biraz farklı kurulum için test yatağı gerekir: github.com/angular/angular/issues/17477#issuecomment-510397690
— Stevanicus
"GÜNCELLENDİ: NİHAİ ÇÖZÜM" yerine, lütfen bir kendi kendine yanıt gönderin, böylece sorunuz çözümden açıkça belirtilir ve çözüm, diğer tüm olası çözümlerle birlikte yukarı / aşağı oylamaya tabi olur.
— ggorlen

Yanıtlar:

182

Geçtin HeroDetailComponentiçin TestBed.createComponent()ilk bileşeni bildirmek olmadan:

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

Umarım yardımcı olur.

Testinizde aşağıdaki hatalar için güncelleme: Daha fazla içe aktarım eklendi (HeroModule'unuzu bir taslak olarak alın çünkü temelde içeri aktarmak ve sağlamak istediğiniz şey budur).

— lexith
kaynak
Bu beyanı eklersem, daha fazla hata görünür. Bilgileri güncelledim, yukarıda görebilirsiniz.
— ismaestro
1
Ama bu hatadan kurtulmanın yolu budur. Aşağıdaki hatalar, test kurulumunuzla ilgili başka bir sorun olabilir.
— lexith
Bundan sonra hangi Hata geliyor?
— lexith
'Translate' hattı bulunamadı ("<h1 class =" section-title "> {{[ERROR ->] 'heroDetail' | translate}} </h1> <md-progress-spinner * ngIf ="! hero "class =" progre "): ng: ///DynamicTestModule/HeroDetailComponent.html@0: 28 'md-progress-
— spinner'ın
Unutmayın, bu tembel bir yükleme modülü olduğu için oluyor. Çünkü yaptığım diğer testler başarısız olmuyor ...
— ismaestro
9

Bildirimleri kaçırıyorsunuz, test edilen sınıfı bildirimlere eklemeniz gerekiyor.

declarations: [component]
— Akash Yellappa
kaynak
Benim durumumda, TestBed'in yapılandırmasını bir bileşenden yenisine kopyaladım ve ardından test edilen bileşeni dahil etmedim.
— Tonatio
3

İş arkadaşım ve ben bu sorunu yaşadık, ancak düzeltme internetteki her şeyden çok farklıydı.

Visual Studio Code kullanıyoruz ve klasör adları büyük / küçük harfe duyarlı değildir. Bu nedenle, herkesten küçük harfli bir adlandırma kuralı kullanmalarını istedik, ancak sonunda büyük harfli bir ad kaynak denetimine girdi. Dolambaçlı bir şekilde adını değiştirdik ve her şey yolundaydı.

Bir ay sonra, iş arkadaşım bu hata mesajını kırmak için belirli bir birim testi almaya başladı. Bu testte sadece bilgisayarı kırılıyordu. Testi etkileyebilecek olası tüm kodları tam anlamıyla yorumladık ve hala hatayı aldık. Son olarak, sınıfı genel olarak aradım ve klasör adının büyük harf adına geri döndüğünü fark ettik. Onu küçük harfle yeniden adlandırdık, bekleyen hiçbir değişiklik fark edilmeden ... ekleyebilirim ve test işe yaradı.

Stil kılavuzlarını takip etmenin bir ders olmasına izin verin. :)

Anlaşılır olması için, düzeltme klasör adını değiştirerek benziyordu FOOiçin foo.

— christo8989
kaynak
2

Bu tür bir hata, TestBed yapılandırmasının sağlayıcısındaki bildirimlerde ve hizmetlerde eksik bileşen eklenmesi nedeniyle ortaya çıktı.

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

HeroDetailComponent bileşenini doğru şekilde içe aktarmalısınız . Yollarda harf durumunun bile önemli olduğuna dikkat edin . yani ('@ angular / formlar' doğru, ANCAK '@ angular / Forms' değil.

— Sami
kaynak
1

Bununla ilgili hala sorun yaşayanlar için - Angular ekibinin beforeEach callback işlevinde yaptığı değişiklikleri tartışan ayrı bir github sorunu okudum.

İşte yaptığım şey:

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

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

BeforeAll kullanmak sorunu düzeltir. Umarım bu, bu belirsiz hatayı çözmem yaklaşık bir gün sürdüğü için başkalarına yardımcı olur.

— Adam P
kaynak
0

Bir bileşeni derlemeden test etmek istiyorsanız, bunu bir sağlayıcı olarak bildirerek yapabilirsiniz:

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

Bakınız: https://angular.io/guide/testing#component-test-basics

— Stevanicus
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.