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

[jinder]

@AtofStryker is there any timeline for supporting this now Cypress 15 is out? As of Angular 20.2 zoneless is stable and will switch to the default mode in 21.

[AtofStryker]

@jinder I don't have a timeline as of now, but the @cypress/angular test harness will work with zoneless Angular applications. It just means that the harness itself needs zone.js

[mikem-of]

@AtofStryker Angular 21 has been released and is zoneless by default, and this is breaking component testing:

To reproduce:

• Run ng new test-app
• Run ng e2e and set up Cypress with component testing
• Run npm i --save-dev @angular-devkit/build-angular
  • (needed because of another issue: feat: support @angular/build as an optional replacement for @angular-devkit/build-angular in Angular 19 Component Testing #30903)
• Write a component test and run it to see this error:

The following error originated from your test code, not from Cypress.

> Cannot find module 'zone.js'

When Cypress detects uncaught errors originating from your test code it will automatically fail the current test.

Cypress could not associate this error to any specific test.

We dynamically generated a new test to display this failure.

Is this on your backlog, and will this be fixed anytime soon?

[AtofStryker]

@mikem-of Angular 21 isn't currently supported with the latest version of Cypress. However, to temporarily work around this, you can install zone.js as a devDependency so cypress/angular can run until we release support.

That being said, we are planning on releasing Angular 21 and zoneless support in the near future with active work being done in #33004 and #33025 respectively, with the zoneless mount handler being the defaulted mount function for Angular 21+. I am actively working on this.