web/test-runner failing when zoneless

[cyrilletuzi]

Command

test

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

@angular-devkit/build-angular:web-test-runner is loading files from zone.js/testing even when in zoneless mode, thus resulting in ng test command failing.

Minimal Reproduction

• ng new (with CLI 18.0.1)
• ng test => OK
• npm install @web/test-runner -D
• replace @angular-devkit/build-angular:karma by @angular-devkit/build-angular:web-test-runner in angular.json
• ng test => OK
• now go zoneless:
  • replace provideZoneChangeDetection({ eventCoalescing: true }) by provideExperimentalZonelessChangeDetection() in src/app/app.config.ts
  • add providers: [provideExperimentalZonelessChangeDetection()] in configureTestingModule in src/app/app.component.spec.ts
  • delete polyfills properties (both in build and test) in angular.json
  • optionally npm rm zone.js but is is not required for reproduction
• ng test => FAIL after the timeout (error below)
• add back polyfills properties (in test) in angular.json (and npm install zone.js if you removed it)
• ng test => OK but now there are warnings:

NG0914: The application is using zoneless change detection, but is still loading Zone.js.Consider removing Zone.js to get the full benefits of zoneless. In applcations using the Angular CLI, Zone.js is typically included in the "polyfills" section of the angular.json file.

Reproduction repository here.
The repo is in the error case. You can uncomment polyfills in angular.json to see the working scenario.

Exception or Error

dist/test-out/browser/app.component.spec.js:

 🚧 404 network requests:
    - testing.js

 ❌ Browser tests did not start after 20000ms You can increase this timeout with the testsStartTimeout option. Check the browser logs or open the browser in debug mode for more information. 

Chrome: |██████████████████████████████| 1/1 test files | 0 passed, 0 failed

Error while running tests.

Your Environment

Angular CLI: 18.0.1
Node: 20.13.1
Package Manager: npm 10.8.0
OS: darwin arm64

Angular: 18.0.0
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1800.1
@angular-devkit/build-angular   18.0.1
@angular-devkit/core            18.0.1
@angular-devkit/schematics      18.0.1
@angular/cli                    18.0.1
@schematics/angular             18.0.1
rxjs                            7.8.1
typescript                      5.4.5
zone.js                         0.14.6

Anything else relevant?

Pull Request which implemented @web/test-runner builder.

The missing testing.js from the error seems to come from this line.

The line which links it to zone.js/testing seems to be here.

What is strange is that this last file seems to have some behaviors to detect zone or zoneless, but it seems ineffective in the end, probably because of the import in the first file, which is always here.

[berkon]

I see the same issue even though not using zoneless. So maybe its a more general issue. I've followed various guides which in fact all state that just angular.json must be changed like this:

and in addition @web/test-runner must be installed. That's it. Somebody also said that @web/test-runner-core must be installed additionally to fix this error but it didn't help either.

[OLEKSII-DROZDIUK]

Have the same problem. It seems to me that jasmine is needed zone.js,and no doesn't matter karma runner you has or web-test-runner.
So without "polyfills": ["zone.js", "zone.js/testing"] line in "test" block your tests doesnt work, mb need to await global fix from Angular team.

[berkon]

I think I found the solution for my problem. But it will probably not solve the initial issue mentioned here regarding the "Zoneless" approach.

Since Angular 15 they've introduced a new way of adding the polyfills. Additionally to the legacy src/polyfills.ts file, now adding the polyfills directly in angular.json like this is supported:

The code for the new experimental web test runner obviously only works when adding the polyfills this way. And additionally also the second entry zone.js/testing must be added to the array. Then it works as expected as far as I could see.

[second-slip]

Just for information: I know this issue is about the build-angular:web-test-runner.

Since updating to to Angular 18.1, I can now run zoneless tests in the Karma test runner: i.e.: "builder": "@angular-devkit/build-angular:karma",.

The working Karma test setup after updating to v18.1:

angular.json

        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "polyfills": [],
            "tsConfig": "tsconfig.spec.json",

As you can see I have removed the zone.js and zone.js/testing libraries from the polyfills array.

.spec.ts

    await TestBed.configureTestingModule(
      {
        providers: [provideExperimentalZonelessChangeDetection()]
      })
      .compileComponents();

All tests in my zoneless project are working.

[sysmat]

• for me spyOn is not working, when going zoneless (provideExperimentalZonelessChangeDetection)

 await TestBed.configureTestingModule(
      {
        providers: [provideExperimentalZonelessChangeDetection()]
      })
      .compileComponents();

   await fixture.whenStable();
    infoService = fixture.debugElement.injector.get(InfoService);

...
it(`should have a version`, async () => {
    await fixture.whenStable();
    spyOn(infoService, 'getAppVersion').and.returnValue(of({ entity: 'test' }));

    fixture.detectChanges(); 
    expect(infoService.getAppVersion).toHaveBeenCalledTimes(1); // error

    expect(component.version).toEqual('test');
  });