Error: zone-testing.js is needed for the fakeAsync() test helper but could not be found. When running test on Angular webapp using serenityJS+Jasmine

Hello little bit late to answer but I leave the comment here for future reference:

ERROR ORIGIN

In my case, the error was found in the test.ts file. This file sets the TestBed config that is used by default in Angular spec files when created with the command ng generate component my-component.

SOLUTION

The fix is to make sure that the following imports are at the top of the file test.ts before any other import:

import 'zone.js';
import 'zone.js/testing';

Be careful with your configurations that might alter the order of those imports as it may lead to break the tests again. That's why you might, over the test.ts file:

1. Deactivate onSave optimize imports.
2. Avoid running Prettier, Beautify or other code style formatter that reorganizes the imports.
3. Check for pre-commits hooks like Husky that format the files and reorganize the imports.

FURTHER TROUBLESHOTING

You might also want to look if the following imports are present:

import 'zone.js';
import 'zone.js/dist/async-test.js';
import 'zone.js/dist/proxy.js';
import 'zone.js/dist/sync-test';
import 'zone.js/dist/jasmine-patch';

Same issue was solved with other approaches in this thread.

I got the same issue after upgraded from the Angular 10 to Angular 12. Then I fixed it by move the import 'zone.js/testing to the top of the file test.ts

This issue comes into picture from Angular v11.

Solution: Move import 'zone.js/dist/zone-testing'; to the top in src/test.ts file.

In Vscode open file test.ts.

Add line down on top file, first line.

import 'zone.js/testing';

OBS: if your vscode organize your imports there file, use o organize-imports-disable-next-line.

Example:

import 'zone.js/testing';
// organize-imports-disable-next-line

See more

I solved this problem by using Angular waitForAsync.

Instead of:

beforeEach(async () => {
    await TestBed.configureTestingModule({declarations: [BannerComponent]}).compileComponents();
});

Try to use the following:

import { waitForAsync } from '@angular/core/testing';

beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({declarations: [BannerComponent]}).compileComponents();
}));