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

Question

I'm developing a github repository (with angular 7 and angular-cli), and I have some tests with Karma and Jasmine working in the master branch.

Now I'm trying to add lazy loading feature, the thing is, that the tests that before passed, now they do not. It's funny because only the tests from the lazy loading module are failing...

Here is the code and the error:

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

The error is this:

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)

You can see the entire project, for more details if you need it.

UPDATE: added declaration like this:

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

Now, new errors appears:

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

And more... it's like all directives and components from angular material, and the pipe translate from ngx-translate/core do not appear to be included...

You do not need to declare the component to test it, you just need to setup the test bed slightly differently: https://github.com/angular/angular/issues/17477#issuecomment-510397690 — Stevanicus, Jul 11 '19 at 09:01
Instead of "UPDATED: FINAL SOLUTION", please post a [self answer](https://stackoverflow.com/help/self-answer) so that your question is clearly delineated from the solution and the solution is subject to up/down votes along with all other possible solutions. — ggorlen, Oct 27 '20 at 23:19
I've added the answer from your question as an [actual answer](https://stackoverflow.com/a/68745394/542251). If you'd like to do this yourself as prompted please let me know and I will delete my wiki — Liam, Aug 11 '21 at 16:01

score 212 · Accepted Answer · edited Dec 22 '22 at 09:55

212

You passed HeroDetailComponent to TestBed.createComponent() without declaring the component first:

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

Update for following errors in your test: Added some more imports (just take your HeroModule as a blueprint because that's basically what you want to import and provide).

edited Dec 22 '22 at 09:55

starball

20,030
7
43
238

answered Aug 09 '17 at 08:46

malifa

8,025
2
42
57

If I add that declaration, then more errors appears. I updated the info, you can see it above. – ismaestro Aug 09 '17 at 09:08
1

Well, but that's how you get rid of this error. Following errors might be another problem with your test setup. – malifa Aug 09 '17 at 09:10
What Error comes next? – malifa Aug 09 '17 at 09:14
The pipe 'translate' could not be found ("
{{[ERROR ->]'heroDetail' | translate}}
– ismaestro Aug 09 '17 at 09:15
And don't forget, that this is happening because it's a lazy loading module. Because the other tests that I have do not fail... – ismaestro Aug 09 '17 at 09:15
Hint: just because you're importing the AppModule (which imports your SharedModule) doesn't mean it's available for your HeroDetailComponent in your test. So you should provide any modules / services etc in the Testbed configuration which are used by the component you test. i will update my answer. – malifa Aug 09 '17 at 09:23
@Ismaestro update my answer. could be that there will be new errors, just let me know and we'll probably get through it step by step.. – malifa Aug 09 '17 at 09:27
Your edited solution will work but i'm used to not import original modules (which i do my tests on, not the dependencies) but provide it manually because you will run into problems soonish when you have to use mocked parts of dependencies. but that's another story. – malifa Aug 09 '17 at 09:58
You do not need to declare the component to test it, you just need to setup the test bed slightly differently: github.com/angular/angular/issues/17477#issuecomment-510397690 – Stevanicus Jul 11 '19 at 09:02
I forget this everytime and come back to this thread always I have not done any TestHostComponents for a while :D – Florian Leitgeb Nov 13 '19 at 13:54
"just take your HeroModule as a blueprint because that's basically what you want to import and provide" ... or just import the module itself – danday74 Mar 30 '21 at 14:47

score 12 · Answer 2 · edited Apr 04 '18 at 01:12

12

You're missing the declarations, you need to add the class being tested into the declarations.

declarations: [component]

edited Apr 04 '18 at 01:12

Stephen Rauch

47,830
31
106
135

answered Apr 04 '18 at 00:49

Akash Yellappa

2,126
28
21

In my case, I copied TestBed's configuration from one component to the new one and, then, I didn't include the component under test. – Tonatio Oct 22 '19 at 13:01

score 3 · Answer 3 · answered Aug 29 '18 at 18:08

My coworker and I had this issue but the fix was way different than anything else on the internet.

We are using Visual Studio Code and the folder names are case insensitive. Because of that, we asked everyone to use a lowercase naming convention but eventually an uppercase name got into source control. We renamed it, in a roundabout way, and everything was fine.

A month later, my coworker started getting a specific unit test to break with this error message. Only his computer was breaking on that test. We literally commented out all the code that could possible be effecting the test and we still got the error. Finally, I globally searched for the class and we realized that the folder name had reverted back to the uppercase name. We renamed it back to a lowercase name, with no pending changes recognized might I add..., and the test worked.

Let that be a lesson to follow style guides. :)

For clarity, the fix was similar to changing the folder name FOO to foo.

score 2 · Answer 4 · answered Jul 11 '18 at 10:51

This type of error raised due to missing adding component in declarations and services in provider of TestBed configuration.

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

score 1 · Answer 5 · answered Mar 05 '18 at 21:43

1

you must import the component HeroDetailComponent in the right way. Notice that even case of letters is matter in paths. i.e ('@angular/forms' is correct, BUT'@angular/Forms' is not.

answered Mar 05 '18 at 21:43

sami

358
1
4
5

score 1 · Answer 6 · answered Oct 17 '19 at 19:19

For those who are still having issues with this - I read a separate github issue that discussed changes the Angular team made to the beforeEach callback function.

Here is what I did:

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

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

Using beforeAll fixes the issue. Hope this helps others as it took me about a day to get this resolve this obscure bug.

For my case, using `beforeAll` actually created the issue. – Envil Feb 15 '21 at 19:11 — Envil, Feb 15 '21 at 19:11

score 1 · Answer 7 · answered Aug 11 '21 at 16:00

Answer copied out of question

The problem was that HeroesModule was not been imported anywhere. This works, because HeroesModule declares HeroDetailComponent, which was the initial problem:

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

score 0 · Answer 8 · answered Jul 11 '19 at 09:03

If you want to test a component without compiling it then you can by declaring it as a provider:

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

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

score 0 · Answer 9 · answered Mar 30 '21 at 14:50

0

I imported the wrong module into the test suite! correcting which module was imported fixed this error.

answered Mar 30 '21 at 14:50

danday74

52,471
49
232
283

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

9 Answers9

{{[ERROR ->]'heroDetail' | translate}}

Linked