Debug element not showing HTML of child component

Question

I am trying to see the HTML of the child component when using fixture.debugElement. When I console.log(fixture.debugElement) I only see the tag of the child component but not the HTML it contains.

Parent template

<h1>Hello World</h1>
<child-component *ngIf="show"></child-component>

Child template

<p>Some Text</p>

Parent spec

it('should render child component', () => {
   component.show = true;
   fixture.detectChanges();
   console.log(comonent.debugElement);
   // Child component appears empty like this: <child-component></child-component>
});

I expect to see the HTML of the child component.

Answer 1

If you want to see the ChildComponent as well, you have to include it in the declarations array of TestBed.configureTestingModule.

TestBed.configureTestingModule({
            // !! include child component here
            declarations: [ParentComponent, ChildComponent]
        }).compileComponents();