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

Question

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

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

declarations: [component]

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.

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

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.