Since Angular 11.0.3, e2e tests produce error

Question

Since 11.0.3 angular/core version, E2E tests are not working on a project with the default configuration.

I open an issue https://github.com/angular/angular/issues/40221 but it seem it's not a regression (?)

Minimal Reproduction

https://github.com/BrunoBeraudPW/issue-angular-11.0.3

It's a default project angular 11.0.3 where I have updated all packages to their latest version

I have updated "manually" all packages because the "ng new" cmd was creating an angular 10 app and so I was thinking that maybe the problem came because of the others packages.

But even when I have just updated angular packages, the error was still here

Exception or Error

When using fakeAsync :

Failed: zone-testing.js is needed for the async() test helper but could not be found.
Please make sure that your environment includes zone.js/dist/zone-testing.js

Several errors in selenium-webdriver libs (promise)

C:\dev-phoenix\1-Photoweb-Forks\test\node_modules\selenium-webdriver\lib\promise.js:3067:27
              this.pending_ = {task: task, q: this.subQ_};
              task.promise.queue_ = this;
              result = this.subQ_.execute_(task.execute);
                                  ~
              this.subQ_.start();
            } catch (ex) {

Several errors in internal/modules/cjs/loader.js

internal/modules/cjs/loader.js:955:30
jasmine-spec-reporter: unable to open 'internal/modules/cjs/loader.js'
Error: ENOENT: no such file or directory, open 'internal/modules/cjs/loader.js'

It seem to not recognize jasmine functions, it underlines in red the name of the main functions describe, it, fit, etc., like if it didn't include test.ts and its import 'zone.js/dist/zone-testing';

Environment

**Angular Version:**
@angular-devkit/architect       0.1100.3
@angular-devkit/build-angular   0.1100.3
@angular-devkit/core            11.0.3
@angular-devkit/schematics      11.0.3
@schematics/angular             11.0.3
@schematics/update              0.1100.3
rxjs                            6.6.3
typescript                      4.0.5

Thank !

Answer 1

Make sure to update your test.ts file. The zone import has to be before the zone-testing import.

import "zone.js/dist/zone";
import 'zone.js/dist/zone-testing';
import { getTestBed } from '@angular/core/testing';
import {
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';

declare const require: {
  context(path: string, deep?: boolean, filter?: RegExp): {
    keys(): string[];
    <T>(id: string): T;
  };
};

// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting()
);
// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);

Or maybe the src/polyfills.ts file is missing / the import is missing:

import 'zone.js/dist/zone';  // Included with Angular CLI.

Answer 2

I encountered the same issue, running E2E scripts that worked fine with Angular 10 no longer work after I upgraded to Angular 11.

However I had a slightly different issue, 25% of my test files failed with the error about fakeAsync, while the rest succeeded. This led me down a path of commenting code to see what I needed to do to make this work.

What I found is that one of my E2E model classes was importing another library of ours for common code. This common library also had unit test helpers that include fakeAsync. When I brought the specific functionality into my e2e project and no longer referenced my other library my E2E scripts started passing again.

In summary, check your E2E code for imports from other libraries and remove those until your scripts start working. I also suggest making a reproduction script as minimal as possible so you get results faster for each reference you remove and test.