Angular Karma Jasmine Error: Illegal state: Could not load the summary for directive

Question

我正在开发 github repository（使用 angular 7 和 angular-cli），并且我在 master 分支中使用 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 material 中的所有指令和组件一样，ngx-translate/core 中的管道翻译似乎不包括在内...

Answer 1

您将 HeroDetailComponent 传递给了 TestBed.createComponent() 而没有先声明组件：

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

希望对您有所帮助。

针对您测试中的以下错误进行更新：添加了更多导入（只需将您的 HeroModule 作为蓝图，因为这基本上就是您想要导入和提供的内容）。

Answer 2

您必须以正确的方式导入组件 HeroDetailComponent。注意即使字母大小写在路径中也很重要。即（'@angular/forms' 是正确的，BUT'@angular/Forms' 不是。

Answer 3

您缺少声明，您需要将正在测试的 class 添加到声明中。

declarations: [component]

Answer 4

此类错误是由于在 TestBed 配置提供者的声明和服务中缺少添加组件而引发的。

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

Answer 5

我和我的同事遇到了这个问题，但解决方法与 Internet 上的其他解决方法大不相同。

我们正在使用 Visual Studio 代码，文件夹名称不区分大小写。因此，我们要求每个人都使用小写命名约定，但最终大写名称进入了源代码管理。我们以迂回的方式重新命名它，一切都很好。

一个月后，我的同事开始进行特定的单元测试以打破此错误消息。只有他的电脑在那次测试中出问题了。我们从字面上注释掉了所有可能影响测试的代码，但我们仍然遇到错误。最后，我全局搜索 class，我们发现文件夹名称已恢复为大写名称。我们将其重新命名为小写名称，我可能会添加未识别的未决更改...，并且测试有效。

让它成为遵循风格指南的一课。 :)

为清楚起见，修复类似于将文件夹名称 FOO 更改为 foo。

Answer 6

如果您想在不编译组件的情况下测试它，那么您可以通过将其声明为提供者来进行：

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

Answer 7

对于仍然对此有疑问的人 - 我阅读了一个单独的 github 问题，其中讨论了 Angular 团队对 beforeEach 回调函数所做的更改。

这是我所做的：

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

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

使用 beforeAll 解决了这个问题。希望这对其他人有帮助，因为我花了大约一天的时间来解决这个模糊的错误。

Answer 8

我在测试套件中导入了错误的模块！更正导入的模块修复了此错误。

Answer 9

复制问题的答案

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

Angular Karma Jasmine Error: Illegal state: Could not load the summary for directive

Angular Karma Jasmine Error: Illegal state: Could not load the summary for directive

javascript

karma-runner

karma-jasmine

angular-cli

angular