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 l

Answer 1

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

Answer 2

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

Answer 3

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.

Answer 4

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

Hope it helps.

---

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

Answer 5

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

declarations: [component]

Answer 6

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.