Угловая ошибка Karma Jasmine: незаконное состояние: не удалось загрузить резюме для директивы

Я разрабатываю репозиторий github (с angular 4 и angular-cli), и у меня есть несколько тестов с кармой и Жасмин, работающими в главной ветви.

Теперь я пытаюсь добавить функцию ленивой загрузки, и я создал новую ветвь, которую вы можете увидеть здесь.

Дело в том, что испытания, которые раньше проходили, теперь ими не занимаются. Это забавно, потому что проваливаются только тесты из модуля ленивой загрузки...

Вот код и Ошибка: 

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

И многое другое... это как все директивы и компоненты из углового материала, а труба translate от ngx-translate/core, похоже, не входит...

ОБНОВЛЕНО: ОКОНЧАТЕЛЬНОЕ РЕШЕНИЕ

Проблема заключалась в том, что HeroesModule был нигде не было завезено. это работает, потому что HeroesModule объявляет Herodetail Component, который был исходной задачей : 

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();
  }));
});
5 30
javascript angular-cli karma-runner karma-jasmine

5 ответов:

Вы передали HeroDetailComponent в TestBed.createComponent() , не объявив сначала компонент: 

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

Надеюсь, что это помогает.

Обновление для следующих ошибок в тесте: добавлено еще несколько импорта (просто возьмите свой HeroModule в качестве чертежа, потому что это в основном то, что вы хотите импортировать и предоставить).

47

Вы пропускаете объявления, вам нужно добавить тестируемый класс в объявления.

declarations: [component]
1

Необходимо импортировать компонент Herodetail Component в правильном направлении. уведомление, что даже регистр букв значения в пути. то есть ("@angular/forms "- правильно, но "@ angular/Forms " - нет.

0

Этот тип ошибки возникает из-за отсутствия компонента добавления в объявлениях и службах в поставщике конфигурации тестового стенда.

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

У меня и моего коллеги была эта проблема, но исправление было совсем другим, чем все остальное в интернете.

Мы используем код Visual Studio, и имена папок не зависят от регистра. Из-за этого мы попросили всех использовать соглашение об именовании в нижнем регистре, но в конечном итоге имя в верхнем регистре попало в систему управления версиями. Мы переименовали его окольным путем, и все было прекрасно.

Через месяц мой коллега начал получать специальный модульный тест, чтобы сломать это сообщение об ошибке. Только его компьютер ломался на этом тесте. Мы буквально закомментировали весь код, который мог бы повлиять на тест, и все равно получили ошибку. Наконец, я глобально искал класс, и мы поняли, что имя папки вернулось к имени в верхнем регистре. Мы переименовали его обратно в имя в нижнем регистре, без каких-либо ожидающих изменений, которые я мог бы добавить... и тест сработал.

Пусть это будет уроком, чтобы следовать руководствам по стилю. :)

Для ясности, исправление было похоже на изменение имя папки FOO - foo.

0