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

Question

I am trying to run component testing on Angular web app using serenityJS + Jasmine but encountered the error below. Any idea how I can resolve this issue?

Message:

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

   Error: zone-testing.js is needed for the fakeAsync() test helper but could not be found.
           Please make sure that your environment includes zone.js/dist/zone-testing.js
       at resetFakeAsyncZone (C:\Users\zhenweiwong\Desktop\serenityjsframework\packages\core\testing\src\fake_async.ts:25:9)
       at UserContext.<anonymous> (C:\Users\zhenweiwong\Desktop\serenityjsframework\packages\core\testing\src\before_each.ts:26:5)
       at <Jasmine>
       at processImmediate (internal/timers.js:439:21)
       at process.topLevelDomainCallback (domain.js:131:23)
 Message:
   Error: In this configuration Angular requires Zone.js
 Stack:
   Error: In this configuration Angular requires Zone.js
       at new NgZone (C:\Users\zhenweiwong\Desktop\serenityjsframework\packages\core\src\zone\ng_zone.ts:129:13)
       at TestBedViewEngine._initIfNeeded (C:\Users\zhenweiwong\Desktop\serenityjsframework\packages\core\testing\src\test_bed.ts:409:9)
       at TestBedViewEngine.createComponent (C:\Users\zhenweiwong\Desktop\serenityjsframework\packages\core\testing\src\test_bed.ts:599:10)
       at Function.TestBedViewEngine.createComponent (C:\Users\zhenweiwong\Desktop\serenityjsframework\packages\core\testing\src\test_bed.ts:245:36)     
       at UserContext.<anonymous> (C:\Users\zhenweiwong\Desktop\serenityjsframework\jasmine-test\spec\app1.component.spec.ts:32:29)
       at <Jasmine>

I have the same problem but using Jest instead of Jasmine, have you ever find a way to fix it? — ghiscoding, Jun 03 '21 at 02:23
@ghiscoding [the top-voted answer at the present time](https://stackoverflow.com/a/68797535/6243352) works in Jest for me (importing `"zone.js"` and `"zone.js/testing"` at the very top of the `setupJest.ts` file). Angular 12/Jest 27/TS 4.2 environment. — ggorlen, May 06 '22 at 01:57

Santironhacker · Answer 1 · 2022-12-02T08:05:33.880

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 you place the following imports at the TOP of the file test.ts before any other import:

// Top of test.ts file
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:

Deactivate onSave optimize imports.
Avoid running Prettier, Beautify or other code style formatter that reorganizes the imports.
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.

you might need to use `import 'zone.js/dist/zone-testing';` instead of `import 'zone.js/testing';` & it should be on top of all the imports (it worked for me while the other one kept generating the error `Expected to be running in 'ProxyZone', but it was not found.`) according to this link: https://github.com/angular/angular/issues/40977#issuecomment-785800709 — Katzura, Oct 15 '21 at 09:52
Thanks buddy u saved my day, I have placed `import 'zone.js/testing';` at top in test.ts and it worked for me — Vitron, Apr 27 '22 at 09:41
Had the same issue on my side with an Angular v14 project. The `test.ts` file only had the `'zone.js/testing'` import and moving it on top of the file fixed my issues. — Deyan Peychev, May 31 '23 at 08:12

score 20 · Answer 2 · answered Nov 17 '21 at 07:51

20

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

answered Nov 17 '21 at 07:51

Phat Tran

3,404
1
19
22

score 8 · Answer 3 · answered Jan 21 '22 at 11:32

8

This issue comes into picture from Angular v11.

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

answered Jan 21 '22 at 11:32

Manas Agrawal

111
1
4

score 7 · Answer 4 · answered Jul 13 '22 at 02:54

7

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

answered Jul 13 '22 at 02:54

Raul Melo

131
2
2

It's confusing that you "disable" the next line, but put the thing that needs to be disabled a _above_ the disable comment. Either way though, it works. My tests started breaking after I added the organize imports option. Greatly appreciated! – Sergey Oct 26 '22 at 21:05
It seems that you can just use a blank line between `import 'zone.js/testing';` and all other imports, rather than this disable command – stevospinks Jun 23 '23 at 10:52

Francesco Borzi · Answer 5 · 2023-04-19T08:35:54.697

4

Angular 15

I ended up here after getting a similar issue in my app after upgrading from Angular 14 to Angular 15. I solved it this way by:

editing the angular.json file and in the project "test" changing its "options" by removing "main": "src/test.ts", and adding this instead:

"polyfills": ["zone.js", "zone.js/testing"],

the src/test.ts file can now be deleted

edited Apr 19 '23 at 08:35

answered Dec 25 '22 at 14:40

Francesco Borzi

56,083
47
179
252

score 0 · Answer 6 · answered Mar 31 '22 at 06:20

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();
}));

score 0 · Answer 7 · answered Oct 08 '22 at 00:12

For me this error because of syntax,

From

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

To

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

score 0 · Answer 8 · answered Apr 20 '23 at 07:38

I fixed the same issue by adding import 'jest-preset-angular/setup-jest'; in setupJest.ts which is used in jest.config.js:

module.exports = {
  preset: './jest.preset.js',
  setupFilesAfterEnv: [
    "<rootDir>/setupJest.ts"
  ],
...

I am using Angular 14 with Jest@^28.1.3

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

8 Answers8

Angular 15

Linked