Unit Testing No provider for ChangeDetectorRef - unit-testing

Question

version: Angular 4.
I am injecting a parent component into child component to access parent method through child component.
In parent-component I had to use ChangeDetectorRef because it has a property which will update runtime.
Now code is working fine but child-component spec is throwing error for "ChangeDetectorRef" which is injected in parent component.
Error: No provider for ChangeDetectorRef!
Parent Component
import { Component, AfterViewChecked, ChangeDetectorRef, ChangeDetectionStrategy } from '#angular/core';
#Component({
selector: 'parent-component',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ParentComponent implements AfterViewChecked {
stageWidth: number;
constructor(private ref: ChangeDetectorRef) {
this.ref = ref;
}
//call this function as many times as number of child components within parent-component.
parentMethod(childInterface: ChildInterface) {
this.childInterfaces.push(childInterface);
}
ngAfterViewChecked() {
this.elementWidth = this.updateElementWidthRuntime();
this.ref.detectChanges();
}
}
Child Component
import { Component, AfterViewInit } from '#angular/core';
import { ParentComponent } from '../carousel.component';
#Component({
selector: 'child-component',
templateUrl: './carousel-slide.component.html',
styleUrls: ['./carousel-slide.component.scss'],
})
export class ChildComponent implements AfterViewInit {
constructor(private parentComponent: ParentComponent) {
}
ngAfterViewInit() {
this.parentComponent.parentMethod(this);
}
}
app.html
<parent-component>
<child-component>
<div class="box">Content of any height and width</div>
</child-component>
<child-component>
<div class="box">Content of any height and width</div>
</child-component>
<child-component>
<div class="box">Content of any height and width</div>
</child-component>
</parent-component>
Unit test for Child Component
import { async, ComponentFixture, TestBed } from '#angular/core/testing';
import { ParentComponent } from '../parent.component';
import { ChildComponent } from './child.component';
describe('ChildComponent', () => {
let component: ChildComponent;
let fixture: ComponentFixture<ChildComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ChildComponent],
providers: [ParentComponent]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ChildComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create \'ChildComponent\'', () => {
expect(component).toBeTruthy();
});
});
When I am trying to add ChangeDetectorRef in providers in child spec, I am getting following error.
Failed: Encountered undefined provider! Usually this means you have a
circular dependencies (might be caused by using 'barrel' index.ts
files.)
After googling and trying many things I am unable to find solution. Any help appreciated.

Answer 1

You are using a component as a provider, which is probably not your intention. Change your test module to declare both your parent and child components.
TestBed.configureTestingModule({
declarations: [ChildComponent, ParentComponent],
providers: []
})

Answer 2

I am able to get rid of this error by making "ChangeDetectorRef" as #Optional dependency in my Parent Component.
constructor(#Optional() private ref: ChangeDetectorRef) {
this.ref = ref;
}
This way my child component's configureTestingModule will ignore ParentComponent provider.