I have a parent component which have a child component which uses it’s parent component in the template. firstly the app failed to build i’ve referred this article -> https://v17.angular.io/api/core/forwardRef and the app was build successfully but now all unit test (jest) for parent and child components and other components which uses the parent component fails with this error -> Cannot read properties of undefined (reading ‘ɵcmp’).
Did someone managed to solve this?
parent.component.ts
import {Component} from '@angular/core';
import {ChildComponent} from "./child/child.component";
@Component({
selector: 'parent',
standalone: true,
imports: [ChildComponent],
templateUrl: './parent.component.html',
styleUrl: './parent.component.css'
})
export class ParentComponent {
}
parent.component.html
Parent
<child [hideParent]="false"/>
parent.component.spec.ts
import { ComponentFixture, TestBed } from
'@angular/core/testing';
import { ParentComponent } from './parent.component';
describe('ParentComponent', () => {
let component: ParentComponent;
let fixture: ComponentFixture<ParentComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [ParentComponent]
})
.compileComponents();
fixture = TestBed.createComponent(ParentComponent);
component = fixture.componentInstance;
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
child.component.ts
@Component({
selector: 'child',
standalone: true,
imports: [forwardRef(() => ParentComponent)],
templateUrl: './child.component.html',
styleUrl: './child.component.css'
})
export class ChildComponent {
hideParent = input(false);
}
child.component.html
Child
@if (hideParent()) {
<parent />
}
child.component.spec.ts
import { ComponentFixture, TestBed } from
'@angular/core/testing';
import { ChildComponent } from './child.component';
import {ParentComponent} from "../parent.component";
describe('ChildComponent', () => {
let component: ChildComponent;
let fixture: ComponentFixture<ChildComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [ChildComponent, ParentComponent]
})
.compileComponents();
fixture = TestBed.createComponent(ChildComponent);
component = fixture.componentInstance;
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
child component spec fails.
5