Angular testing: “Illegal state: Could not load the summary for directive” for an empty component

Question

None of my components were passing unit tests, so I made a new one in the project to try and diagnose.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-thing',
  templateUrl: './thing.component.html',
  styleUrls: ['./thing.component.scss']
})
export class ThingComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
}

And a thing.component.spec.ts file as follows

describe('ThingComponent', () => {
  let component: ThingComponent;
  let fixture: ComponentFixture<ThingComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ ThingComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(ThingComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

The test fails with Error: Illegal state: Could not load the summary for directive ThingComponent. I have turned off all other tests with xit, so this is the only one running.

I have tried to move in everything (providers, imports, etc) from my app.module.ts into the file, which still provides the same result.

When I remove the TestBed configuration, and just have a

const comp = new ThingComponent();
expect(comp).toBeTruthy();

this passes. However, that's not a long term solution for actual components.

Versions of things:

"@angular/cli": "^1.7.2",
"@angular/compiler-cli": "^5.2.0",
"@angular/language-service": "^5.2.0",
"@types/jasmine": "~2.5.53",
"@types/jasminewd2": "~2.0.2
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-jasmine": "^1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
...
"@angular/animations": "^5.2.0",
"@angular/common": "^5.2.0",
"@angular/compiler": "^5.2.0",
"@angular/core": "^5.2.0",
"@angular/forms": "^5.2.0",
"@angular/http": "^5.2.0",
"@angular/platform-browser": "^5.2.0",
"@angular/platform-browser-dynamic": "^5.2.0",

Any help at all would be appreciated, thanks

Update I even changed the test to expect(true).toBeTruthy() and it still gets the same error. I've changed nothing else in the code that was provided by ng g component.

Additionally, I made a new angular project in a separate directory, and the tests pass on this new blank project.

Answer 1

Try to change your test to:

it('should create', () => {
    fixture.detectChanges();

    fixture.whenStable().then(() => {
        expect(component).toBeTruthy();
    });
});

Answer 2

Fixed it. I had a pipe which had a spec.ts file as follows:

beforeEach(async(() => {
  TestBed.configureTestingModule({
    declarations: [SafeHtmlPipe],
    providers: [DomSanitizer]
  })
  .compileComponents();
}));

describe('SafeHtmlPipe', () => {
  let pipe;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [DomSanitizer]
    });
  });

  beforeEach(inject([DomSanitizer], p => {
    pipe = p;
  }));

  xit('create an instance', () => {
    expect(pipe).toBeTruthy();
  });
});

Note how the test is turned off with xit. Despite this, and despite that the component under test was not using this pipe, and despite that I imported/declared it in the component anyway, this was causing the issue.

I don't remember writing this, so maybe it was automatically generated, as the pipe it is testing has a DomSanitizer in the constructor.

Removing the file did the trick.