Mocked component and host decorator

If you have 2 nested components like this

<outer>
  <inner></inner>
</outer>

And the inner component uses a host decorator to inject the outer component in it’s constructor constructor( @Host() public outer: OuterComponent ) { }

When you want to test the inner component it does not seem like it’s possible to mock outer component in the tests as the component declared in the TestBed MockComponent(OuterComponent) is not found and injected into the constructor of the inner component.

Is there any way to make this work?

[ike18t]

Here’s an example I whipped up really quick:

https://stackblitz.com/edit/bah?embed=1&file=app/hello.component.spec.ts

The meat of it is:

      providers: [ 
        { 
          provide: AppComponent, 
          useClass: MockComponent(AppComponent)
        } 
      ]

[kenborge]

@ike18t yeah it did work using the viewProviders approach. I would still consider it a bug though or at least a limitation of the mock framework that maybe should be documented.