Angular 5 testing: how to get a reference to the child component

I'm trying to test the interaction between a host component and a child component in an Angular application. I don't know how to get a reference to the child component created when the parent gets created. Here is the setup:

child.component.spec.ts

@Component({template: `<child [data]="model"></child>`})
class HostComponent {
  public model:any;
}

describe('ChildComponent', () => {
  let hostFixture: ComponentFixture<HostComponent>;
  let childFixture: ComponentFixture<ChildComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ChildComponent, HostComponent]
    });
  }));

  beforeEach(() => {
    // this creates the child component as well, but how to get to it?
    hostFixture = TestBed.createComponent(HostComponent);

    // this creates a NEW instance of child component, not the one from the Host template
    // so it's not the instance I actually want to test
    childFixture = TestBed.createComponent(ChildComponent);
  });
});

Changing the model value in hostFixture.componentInstance doesn't actually change the data input value of childFixture.componentInstance; that's how I realized that there are two instances of child component.

My question is simple, how can I get childFixture to refer to the component fixture found in the HostComponent template, instead of a different instance as I currently have it?

The docs haven't been helpful.

Solution 1:

As explained in the guide, host component instance is created with TestBed.createComponent, and child component instance can be selected from debugElement with By helper:

childDebugElement = hostFixture.debugElement.query(By.directive(ChildComponent));

Or:

childDebugElement = hostFixture.debugElement.query(By.css('child'));

Solution 2:

The answer above is good, answers the body's question, but the header/title of the question asks something else. I wanted to answer the question posed by the header as well. Estus's answer is correct for the specific use case, but Google brings you here based on the question in the title.

To get the child Component not the native element:

Test Component (called HostComponent in the question): <child [data]="model" #child></child>

Then in the class definition:

@Component({template: `<child #child [data]="model"></child>`})
class HostComponent {
    public model:any;
    @ViewChild('child') child;
}

Finally, when testing, on a spec:

it('should do something', () => {
    component.child.value
    component.child.method
    // etc.
}

You could use this in a test case, and I do, to find the child component that you're really trying to test.

The rest is to satisfy a debatable aspect brought up in the comments.

There's also a strong case for making things private when possible. I'm not sure how I feel about it if you want to unit test it. If you want to test a private member you have to let the typescript compiler that you want object with private members publicly accessible by casting it as and wrapping it in parentheses to make it clear what you're casting.

In the component:

...
    @ViewChild('child') private child;
...

In the test:

...
    (<any>component).child.value
    (<any>component).child.method
...

Solution 3:

Iterate through the childNodes of the debugElement(s) and access the context property to get access to the component ant its properties

let debugElement = hostFixture.debugElement.childNodes[x] as DebugElement
debugElement = debugElement.childNodes[x] as DebugElement
...
let component = debugElement.context as YourComponent

This is a very static approach because if a new child is added then maybe you access the wrong childNode. It is better to write a helper method which traverse through the childNodes and find the right name.

Solution 4:

To access the child component instance (even typed):

const childComponent: ChildComponent = hostFixture.debugElement.query(By.directive(ChildComponent)).componentInstance;