feat: add `cypress/angular-zoneless` testing harness for Angular 21 (also supports Angular 20) #33025

AtofStryker · 2025-11-26T17:27:56Z

Additional details

Adds a zoneless component testing harness for Angular 20 (experimental) and Angular 21. Angular 21 ships with zoneless and Cypress will scaffold cypress/angular-zoneless for Angular 21+ projects.

Because this is likely going to be the next target for cypress/angular and the recommended pattern for data-binding is now signals, this testing harness will be remove autoDetectChanges as this happens naturally and autoSpyOutputs as @Output decorators are legacy and can be created manually via createSpyOutputs.

Additionally, with the addition of the zoneless mount handler, the angular-21 system test project needs it's own set of fixtures, which will eventually be moved into the main fixture directory (as a replacement) once Angular 18 and 19 support are officially dropped from Cypress.

After this releases, we need to update @cypress/schematic to support Angular 21 as the scaffolded files via the schematic CLI are not correct. I have a WIP of this on #33027 and it must be done AFTER this feature is released

Steps to test

How has the user experience changed?

PR Tasks

Have tests been added/updated?
Has a PR for user-facing changes been opened in cypress-documentation?
Have API changes been updated in the type definitions?

Note

Introduces a new zoneless Angular component testing harness and integrates it across CLI, CI, scaffolding, and system tests (including Angular 21).

Angular Component Testing:
- New package: @cypress/angular-zoneless with mount API using provideZonelessChangeDetection, signal syncing, and cleanup.
- Angular (zoned) tweak: ensure signal subscriptions are cleaned up when spying on model signals.
CLI/Packaging:
- Export, bundle, and ship cypress/angular-zoneless (exports, files, post-build copy, ignores).
- Docs/links: add @cypress/angular-zoneless to root CHANGELOG.md; CLI changelog notes zoneless support.
CI:
- Add npm-angular-zoneless job and include in main and PR workflows; update branch filters; bump cache key.
Scaffolding & Tests:
- Wizard selects cypress/angular-zoneless for Angular >=21; support file generation tests updated.
- Add full system-tests/projects/angular-21 (zoneless setup, specs, config without zone.js) and include in system test matrix; adjust webpack-dev-server Angular 21 expectations.
- Schematic tests retarget Angular fixtures (19/20).

^{Written by Cursor Bugbot for commit 70ce43b. This will update automatically on new commits. Configure here.}

packages/scaffold-config/src/frameworks.ts

npm/angular-zoneless/src/mount.ts

…ures

…ritable signals to an observable

system-tests/projects/angular-21/angular.json

cypress · 2025-11-26T18:50:56Z

cypress Run #67612

Run Properties: Failed #67612 • 70ce43b063: fix duplicate key

Project	`cypress`
Branch Review	`feat/add_zoneless_angular_harness`
Run status	`Failed #67612`
Run duration	`22m 07s`
Commit	`70ce43b063: fix duplicate key`
Committer	`Bill Glesias`
View all properties for this run ↗︎

Test results
Failures	`4`
Flaky	`2`
Pending	`27`
Skipped	`15`
Passing	`779`
View all changes introduced in this branch ↗︎

UI Coverage `62.34%`
Untested elements	`27`
Tested elements	`48`

Accessibility `99.04%`
Failed rules	`0 critical` `3 serious` `1 moderate` `0 minor`
Failed elements	`19`

Tests for review

cypress\e2e\runner\retries.experimentalRetries.mochaEvents.cy.ts • 1 failed test • app-e2e

View Output

Test		Artifacts
... > does not try to serialize error with err.actual as DOM node		`Test Replay` `Screenshots`

cypress\e2e\runner\runner.ui.cy.ts • 3 failed tests • app-e2e

View Output

Test		Artifacts
src/cypress/runner > tests finish with correct state > no tests		`Test Replay` `Screenshots`
src/cypress/runner > other specs > file with empty suites only displays no tests found		`Test Replay` `Screenshots`
src/cypress/runner > reporter interaction > user can stop test execution		`Test Replay` `Screenshots`

cypress\e2e\cypress-origin-communicator.cy.ts • 2 flaky tests • app-e2e

View Output

Test		Artifacts
Cypress In Cypress Origin Communicator > primary origin memory leak prevention > cleans up the primaryOriginCommunicator events when navigating away from the /specs to /runs		`Test Replay` `Screenshots`
Cypress In Cypress Origin Communicator > primary origin memory leak prevention > cleans up the primaryOriginCommunicator events when navigating to run a different spec		`Test Replay` `Screenshots`

…se zoneless support FIRST before we can have the schematic support angular 21

AtofStryker · 2025-11-26T20:43:40Z

npm/angular/src/mount.ts

-        }).subscribe((value) => {
-          component[expectedChangeKey]?.emit(value)
-        })
+        activeInternalSubscriptions.push(


fixing a bug here? don't think we need a changelog because nothing was reported but cursorbot did detect a possible memory leak here

AtofStryker · 2025-11-26T20:44:11Z

npm/cypress-schematic/src/ct.spec.ts

 const cypressSchematicPackagePath = path.join(__dirname, '..')

-const ANGULAR_PROJECTS: ProjectFixtureDir[] = ['angular-20', 'angular-21']
+const ANGULAR_PROJECTS: ProjectFixtureDir[] = ['angular-19', 'angular-20']


we have to downgrade the test because the zoneless handler isn't supported within the binary yet (see the PR description)

AtofStryker · 2025-11-26T20:44:44Z

system-tests/projects/angular-21/package.json

    "jsdom": "^27.1.0",
    "typescript": "~5.9.2",
-    "vitest": "^4.0.8",
-    "zone.js": "~0.15.0"


removes the zone.js dependency as promised

cursor · 2025-11-26T20:48:07Z

system-tests/projects/angular-21/src/app/mount.cy.ts

+      },
+    }
+
+    cy.mount(ProductComponent, { providers: [{ provider: Cart, useValue: cartFake }] })


Bug: Test uses wrong property name for Angular DI

The test "should verify a faked service" uses provider: Cart instead of the correct Angular DI property provide: Cart. Angular's dependency injection requires provide as the property key - using provider causes Angular to ignore the configuration entirely. The test still passes because both the fake and real Cart implementations have identical behavior, but this test doesn't actually verify provider overrides work as intended.

cursor bot reviewed Nov 26, 2025

View reviewed changes

packages/scaffold-config/src/frameworks.ts Show resolved Hide resolved

npm/angular-zoneless/src/mount.ts Outdated Show resolved Hide resolved

AtofStryker mentioned this pull request Nov 26, 2025

Cypress component tests not working without zone.js #30070

Open

AtofStryker added 6 commits November 26, 2025 12:54

wip

8d566ba

make zoneless changes on top of copied default handler

62a77be

work on getting angular 21 system-test correctly set up with new fixt…

9ff6d5a

…ures

build binaries to test

3b81962

add changelog entry additional

c780b89

fix: make sure internal subscriptions are leaned up when converting w…

b3a6a49

…ritable signals to an observable

AtofStryker force-pushed the feat/add_zoneless_angular_harness branch from 5700a7b to b3a6a49 Compare November 26, 2025 17:54

cursor bot reviewed Nov 26, 2025

View reviewed changes

system-tests/projects/angular-21/angular.json Show resolved Hide resolved

update cache

b6e60fd

AtofStryker force-pushed the feat/add_zoneless_angular_harness branch from 6b71efe to a1b2377 Compare November 26, 2025 20:36

only test angular 19 and 20 for cypress schematic as we need to relea…

15f446b

…se zoneless support FIRST before we can have the schematic support angular 21

AtofStryker force-pushed the feat/add_zoneless_angular_harness branch from a1b2377 to 15f446b Compare November 26, 2025 20:40

AtofStryker commented Nov 26, 2025

View reviewed changes

cursor bot reviewed Nov 26, 2025

View reviewed changes

fix duplicate key

70ce43b

AtofStryker force-pushed the feat/add_zoneless_angular_harness branch from 10e9b77 to 70ce43b Compare November 26, 2025 22:35

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: add `cypress/angular-zoneless` testing harness for Angular 21 (also supports Angular 20) #33025

feat: add `cypress/angular-zoneless` testing harness for Angular 21 (also supports Angular 20) #33025

AtofStryker commented Nov 26, 2025 •

edited by cursor bot

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cypress bot commented Nov 26, 2025 •

edited

Loading

Uh oh!

AtofStryker Nov 26, 2025

Uh oh!

AtofStryker Nov 26, 2025

Uh oh!

AtofStryker Nov 26, 2025

Uh oh!

cursor bot Nov 26, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

feat: add cypress/angular-zoneless testing harness for Angular 21 (also supports Angular 20) #33025

Are you sure you want to change the base?

feat: add cypress/angular-zoneless testing harness for Angular 21 (also supports Angular 20) #33025

Conversation

AtofStryker commented Nov 26, 2025 • edited by cursor bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Additional details

Steps to test

How has the user experience changed?

PR Tasks

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cypress bot commented Nov 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

cypress Run #67612

Tests for review

Uh oh!

AtofStryker Nov 26, 2025

Choose a reason for hiding this comment

Uh oh!

AtofStryker Nov 26, 2025

Choose a reason for hiding this comment

Uh oh!

AtofStryker Nov 26, 2025

Choose a reason for hiding this comment

Uh oh!

cursor bot Nov 26, 2025

Choose a reason for hiding this comment

Bug: Test uses wrong property name for Angular DI

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

feat: add `cypress/angular-zoneless` testing harness for Angular 21 (also supports Angular 20) #33025

feat: add `cypress/angular-zoneless` testing harness for Angular 21 (also supports Angular 20) #33025

AtofStryker commented Nov 26, 2025 •

edited by cursor bot

Loading

cypress bot commented Nov 26, 2025 •

edited

Loading