Cypress component tests not working without zone.js

[muhamedkarajic]

Current behavior

I believe that currently somehow cypress components tests require zone.js to know when to execute the next instructions. Now since angular allowes zoneless change detection Zone.js is not anymore a requirement.

Desired behavior

I would like to ask if we can get the feature or bugfix so that cypress component tests run without zone.js.

Test code to reproduce

The instructions how to enable zoneless change detection can be found here: https://angular.dev/guide/experimental/zoneless

Cypress Version

13.13.3

Node version

v18.20.0

Operating System

macOS 12.6.6

Debug Logs

No response

Other

If this is a feature request I'm fine to change the type of the workitem to such one.

[ivebeenlinuxed]

Agreed, I think I am experiencing this issue.

Edit:

Changes in signals do not seem to update the component, even with wrapper.fixture.detectChanges()

cy.mount(LoginComponent, {
    imports: [],
    providers: []
  }).then((wrapper) => {
    wrapper.fixture.detectChanges()
})

When using this: https://angular.dev/guide/experimental/zoneless#using-zoneless-in-testbed

provideExperimentalZonelessChangeDetection() seems to produce the following error:

Uncaught (in promise) Error: Failed to teardown component. The version of Angular you are using may not be officially supported.
    at cleanup (http://localhost:8080/__cypress/src/cypress-support-file.js:214:31)
    at $Cypress.<anonymous> (http://localhost:8080/__cypress/src/cypress-support-file.js:199:73)
    at listener (http://localhost:8080/__cypress/runner/cypress_runner.js:139983:19)
    at tryCatcher (http://localhost:8080/__cypress/runner/cypress_runner.js:1807:23)
    at MappingPromiseArray._promiseFulfilled (http://localhost:8080/__cypress/runner/cypress_runner.js:4947:38)
    at PromiseArray._iterate (http://localhost:8080/__cypress/runner/cypress_runner.js:2920:31)
    at MappingPromiseArray.init (http://localhost:8080/__cypress/runner/cypress_runner.js:2884:10)
    at MappingPromiseArray._asyncInit (http://localhost:8080/__cypress/runner/cypress_runner.js:4916:10)
    at http://localhost:8080/__cypress/runner/cypress_runner.js:2382:20
From previous event:
    at Promise.longStackTracesCaptureStackTrace [as _captureStackTrace] (http://localhost:8080/__cypress/runner/cypress_runner.js:3486:19)
    at Promise._then (http://localhost:8080/__cypress/runner/cypress_runner.js:1239:17)
    at Promise._passThrough (http://localhost:8080/__cypress/runner/cypress_runner.js:4110:17)
    at Promise.lastly.Promise.finally (http://localhost:8080/__cypress/runner/cypress_runner.js:4119:17)
    at Object.onRunnableRun (http://localhost:8080/__cypress/runner/cypress_runner.js:162715:53)
    at $Cypress.action (http://localhost:8080/__cypress/runner/cypress_runner.js:41461:28)
    at Runnable.run (http://localhost:8080/__cypress/runner/cypress_runner.js:145303:13)
    at next (http://localhost:8080/__cypress/runner/cypress_runner.js:155088:10)
    at http://localhost:8080/__cypress/runner/cypress_runner.js:155132:5
    at timeslice (http://localhost:8080/__cypress/runner/cypress_runner.js:145643:27)

[AtofStryker]

we are going to look into this with angular 20 since zoneless is going to be the new default