Testing @inject parent and @contentChildren together

Question

I am developing a custom tab component composed by a parent and children like this:

Parent

@Component({
  selector: 'app-custom-tabs',
  template: `
  <div class="inline-flex">
    <ng-content select="app-custom-tab"></ng-content>
  </div>
  `
})
export class CustomTabsComponent {
  @ContentChildren(CustomTabComponent) _tabs: QueryList<CustomTabComponent>;
}

Child

@Component({
  selector: 'app-custom-tab',
  template: `
  <div>
    <ng-content></ng-content>
  </div>
  `
})
export class CustomTabComponent {
  constructor(@Inject(CustomTabsComponent) private _group: CustomTabsComponent) {
  }
}

Parent and children need to know each other. In runtime, I am not running any errors, but I can't manage to test it:

@Component({
  selector: 'app-fake',
  template: `
  <app-custom-tabs>
    <app-custom-tab> selected </app-custom-tab>
  </app-custom-tabs>
  `
}) class FakeComponent {
};

fdescribe('CustomTabsComponent', () => {
  let component: FakeComponent;
  let fixture: ComponentFixture<FakeComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [FakeComponent, CustomTabsComponent, CustomTabComponent]
    }).compileComponents();

    fixture = TestBed.createComponent(FakeComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

I am running Uncaught ReferenceError: Cannot access 'CustomTabComponent' before initialization; where am I wrong?

Answer 1

Try moving the components from imports to declarations since they are components.

Like this:

await TestBed.configureTestingModule({
      declarations: [FakeComponent, CustomTabsComponent, CustomTabComponent],
    }).compileComponents();