Angular component test with viewchild and directive

Question

I made a plunker with my problem... https://embed.plnkr.co/UparfJDomOECGJfWSbqA/ Short: I am unable to test my component, it seems to fail in container.component.spec.ts:43 - but without the fixture.detectChanges(), the ngAfterViewInit won't be started. I am unable to see what I am doing wrong.

I want to dynamically load a component into an ng-template with a directive attribute and the solution does work, but I am unable to write a working test for it. Since I am pretty new to unit testing... Is that something I should even test - I think yes. (And yes I read the angular.io testing guide, and some others ;-) ) The error is TypeError: Cannot read property 'viewContainerRef' of undefined which seems to point that @ViewChild does not have a ViewChild...

score 5 · Accepted Answer · answered Aug 06 '17 at 10:49

Testing module doesn't see MenuDirective because you forgot to export it from fake module:

@NgModule({
    declarations: [
        MenuComponent,
        MenuDirective,
    ],
    exports: [MenuDirective], <== add this
    entryComponents: [MenuComponent]
})
class FakeEntryComponents {}

And seems you want to query MenuComponent

menuElement = fixture.debugElement.query(By.directive(MenuComponent))

Plunker Example

Angular component test with viewchild and directive

1 Answers1