Search code examples
angularunit-testingangular-cliangular-directive

Angular 4 the error 'Type 'TestHostComponent' has no properties in common with type 'Component'.' prevent UT running


I met error Type 'TestHostComponent' has no properties in common with type 'Component'., when I ran the test with ng test command, after including 'TestHostComponent' in UT to test a directive.

This is the TestHostComponent:

@Component({
 template: `<div someAttr></div>`
})
export class TestHostComponent {}

Here's part of testing code:

 let fixture: ComponentFixture<TestHostComponent>;
 let de: DebugElement;
 let comp: Component;

 beforeEach(() => {
  fixture = TestBed.configureTestingModule({
    declarations: [SomeDirective, TestHostComponent]
  })
  .createComponent(TestHostComponent);

 fixture.detectChanges();
    de = fixture.debugElement.query(By.directive(SomeDirective));
    comp = fixture.componentInstance;
  });

 it('should be defined', () => {
   expect(de).toBeDefined();
 });

Env:

angular: 4.4.6

@angular/cli: 1.4.9

Any suggestions would be appreciated.


Solution

  • My colleague helped me to find out the solution at last.

    It turned out I broke the tslint rules, and then it prevents UT from running. The Component type of declearation let comp: Component; should changed to TestHostComponent.

    Hope it will help others.