Component testing breaks Angular lifecycle hooks if constructor contains any async actions

[nsbarsukov]

Current behavior

1. Create any empty angular project using official Angular CLI. Its content actually does not matter.
   You can use the following command:

   ng new cypress-bug-demo --directory .
   

2. Install Cypress

   npm install cypress --save-dev
   

3. Enable Angular component testing

   npx cypress open
   

   Select "Component Testing section " and press "Continue" many times (until all unboarding screens will be closed).

4. Create cypress/test.cy.ts file with the following content:

import {ChangeDetectionStrategy, Component} from '@angular/core';
import {mount} from 'cypress/angular';

@Component({
  standalone: true,
  template: `wow`,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MyComponent {
  constructor() {
    console.log('=[constructor.sync]=');

    setTimeout(() => {
      console.log('=[constructor.setTimeout]=');
    }, 5_000);
  }

  ngOnInit() {
    console.log('=[ngOnInit.sync]=');

    setTimeout(() => {
      console.log('=[ngOnInit.setTimeout]=');
    }, 1_000);
  }
}

describe('How it can be possible?', () => {
  it('???', () => {
    mount(MyComponent);
    cy.wait(6_000);
  });
});

Run the created tests. Open DevTools console and the following order of logs:

=[constructor.sync]=
=[constructor.setTimeout]=
=[ngOnInit.sync]=
=[ngOnInit.setTimeout]=

logs-order.mov

Desired behavior

See how it works in Real World application (open dev tools and see order of logs)

https://stackblitz.com/edit/cypress-bug-timers-inside-constructor?file=src%2Fmain.ts

=[constructor.sync]=
=[ngOnInit.sync]=
=[ngOnInit.setTimeout]=
=[constructor.setTimeout]=

Test code to reproduce

import {ChangeDetectionStrategy, Component} from '@angular/core';
import {mount} from 'cypress/angular';

@Component({
  standalone: true,
  template: `wow`,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MyComponent {
  constructor() {
    console.log('=[constructor.sync]=');

    setTimeout(() => {
      console.log('=[constructor.setTimeout]=');
    }, 5_000);
  }

  ngOnInit() {
    console.log('=[ngOnInit.sync]=');

    setTimeout(() => {
      console.log('=[ngOnInit.setTimeout]=');
    }, 1_000);
  }
}

describe('How it can be possible?', () => {
  it('???', () => {
    mount(MyComponent);
    cy.wait(6_000);
  });
});

Cypress Version

13.15.0

Node version

v20.15.1

Operating System

MacOS 14.5

Debug Logs

No response

Other

No response