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

Я разрабатываю репозиторий 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)

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

ОБНОВЛЕНИЕ: добавлено такое объявление:

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

И еще ... похоже, что все директивы и компоненты из материала angular, а pipe translate из 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]

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

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

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

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

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

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

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

вы должны правильно импортировать компонент HeroDetailComponent . Обратите внимание, что даже регистр букв имеет значение в путях. ie ('@ angular / forms' верен, НО '@ 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