Angular testing: async function did not complete within 5000ms in non async test

I have checked out several other questions related to my inquiry, including this one but my problem seems to be completely different.

in my angular project, every component is created with the Angular CLI and has its own test file with just one default test:

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


For some components however, this fails with the following error log

Chrome 139.0.0.0 (Mac OS 10.15.7) FooPage should create FAILED Error: Timeout - Async function did not complete within 5000ms (set by jasmine.DEFAULT_TIMEOUT_INTERVAL) at
​

even though FooPage is not async at all. This is FooPage

@Component({
selector: 'app-foo-page',
templateUrl: './foo.page.html',
styleUrls: ['./foo.page.scss'],
imports: [... /* All imports here */],
})
export class FooPage
{
private readonly myService = inject(MyService);
public readonly myObservable$ = this.myService.myObservable$;

constructor()
{
// These are some ionic icons
addIcons({ add, close, bluetoothOutline, wifi });
}

public get MyEnum(): typeof MyEnum
{
return MyEnum;
}
}


It cannot be more simple. And this is MyService

@Injectable({
providedIn: 'root'
})
export class MyService {
public readonly otherService = inject(OtherService)
public readonly myObservable = new BehaviorSubject<any[]>([]);
// Other variables and signals
// No constructor
// Lots of methods
}


So this seems all very normal to me, yet the following test WILL fail with the aforementioned error

describe('FooPage', () =>
{
let component: FooPage;
let fixture: ComponentFixture<FooPage>;

beforeEach(waitForAsync(() =>
{
TestBed.configureTestingModule({
providers: [MyService],
imports: [IonicModule.forRoot(), FooPage]
}).compileComponents();

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

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

Continue reading...