Помилка кутової карми Жасмин: Незаконне стан: Не вдалося завантажити резюме для директиви

Я розробляю репозиторій 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'.

І більше ... це як всі директиви та компоненти з кутового матеріалу, а переклад труби з 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 Code, а назви папок не чутливі до регістру. Через це ми попросили всіх використовувати доменні іменні символи, але зрештою велике ім’я потрапило до контролю джерела. Ми перейменували його, круговим шляхом, і все було добре.

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

Нехай це буде уроком для дотримання керівництва стилем. :)

Для наочності виправлення було подібним до зміни назви папки FOOна foo.

потрібно правильно імпортувати компонент HeroDetailComponent . Зверніть увагу, що навіть регістр літер - це матерія у шляхах. тобто ('@ 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