Erro Angular Karma Jasmine: Estado ilegal: não foi possível carregar o resumo da diretiva

Estou desenvolvendo um repositório github (com angular 7 e angular-cli), e tenho alguns testes com Karma e Jasmine trabalhando no branch master.

Agora estou tentando adicionar o recurso de carregamento lento, a questão é que os testes que antes passavam, agora não passam. É engraçado porque apenas os testes do módulo de carregamento lento estão falhando ...

Aqui está o código e o erro:

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

O erro é este:

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)

Você pode ver todo o projeto, para mais detalhes, se precisar.

ATUALIZAÇÃO: declaração adicionada como esta:

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

Agora, novos erros aparecem:

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

E mais ... é como se todas as diretivas e componentes de material angular e a tradução de tubo de ngx-translate / core não parecessem estar incluídos ...

ATUALIZADO: SOLUÇÃO FINAL

O problema é que HeroesModule não foi importado para lugar nenhum. Isso funciona, porque HeroesModule declara HeroDetailComponent, que era o problema inicial :

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

Você passou HeroDetailComponentpara TestBed.createComponent()sem declarar o componente primeiro:

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

Espero que ajude.

Atualização para os seguintes erros em seu teste: Adicionadas mais algumas importações (apenas pegue seu HeroModule como um blueprint porque é basicamente o que você deseja importar e fornecer).

Você está perdendo as declarações, você precisa adicionar a classe que está sendo testada nas declarações.

declarations: [component]

Este tipo de erro foi gerado devido à falta de adição de componente em declarações e serviços no provedor de configuração TestBed.

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

Meu colega de trabalho e eu tivemos esse problema, mas a correção era muito diferente de qualquer outra coisa na Internet.

Estamos usando o Visual Studio Code e os nomes das pastas não diferenciam maiúsculas de minúsculas. Por causa disso, pedimos a todos que usassem uma convenção de nomenclatura em minúsculas, mas eventualmente um nome em maiúsculas entrou no controle de origem. Nós o renomeamos, de uma forma indireta, e estava tudo bem.

Um mês depois, meu colega de trabalho começou a fazer um teste de unidade específico para interromper com essa mensagem de erro. Apenas seu computador estava quebrando naquele teste. Nós literalmente comentamos todo o código que poderia estar efetuando o teste e ainda recebemos o erro. Finalmente, pesquisei globalmente a classe e percebemos que o nome da pasta havia voltado para o nome em maiúsculas. Nós o renomeamos de volta para um nome em minúsculas, sem alterações pendentes reconhecidas, posso adicionar ..., e o teste funcionou.

Que isso seja uma lição para seguir os guias de estilo. :)

Para maior clareza, a correção foi semelhante à alteração do nome da pasta FOOpara foo.

você deve importar o componente HeroDetailComponent da maneira certa. Observe que mesmo o caso das letras é importante nos caminhos. ie ('@ angular / formas' está correto, MAS '@ angular / formas' não está.

Para aqueles que ainda estão tendo problemas com isso - li um outro problema do github que discutia as mudanças que a equipe Angular fez na função de retorno de chamada beforeEach.

Aqui está o que eu fiz:

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

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

Usar beforeAll corrige o problema. Espero que isso ajude outras pessoas, pois levei cerca de um dia para resolver esse bug obscuro.

Se você deseja testar um componente sem compilá-lo, declare-o como um provedor:

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

Veja: https://angular.io/guide/testing#component-test-basics