Jest-preset-angular: Zone already loaded error in version ^4.0.1 and ^5.x.x

[jbgraug]

Whenever there is a dependency on zone.js. Jest terminates.
It does not happen on v3.0.1.

To reproduce just place
import 'zone.js'
in setup-jest.ts

[thymikee]

Zone is already imported and lives in global scope (when you're using setupTestFrameworkScriptFile hook, it's not there yet in setupFiles which executes earlier), it's forbidden to redeclare it, so don't do it manually.

[jbgraug]

I did it manually just to show that it breaks. My project uses a lib. Wich
uses zone.js and whenever I import a file which has any direct or indirect
dependence on it, it breaks.

On Nov 23, 2017 8:46 PM, "Michał Pierzchała" [e-mail]
wrote:

Zone is already imported and lives in global scope (when you're using
setupTestFrameworkScriptFile hook, it's not there yet in setupFiles which
executes earlier), it's forbidden to redeclare it, so don't do it manually.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/thymikee/jest-preset-angular/issues/96#issuecomment-346688872,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ALjDKEtyOcVPhCBX_2TeF3tKdSRQJIvSks5s5cuBgaJpZM4QpB9O
.

[thymikee]

Can you tell show something more about the error?

[jbgraug]

If i drill down into the lib using zone.js, it imports zone.js like this require("zone.js");
which is different from require('zone.js/dist/zone.js'); the one you are using; then it crashes.
Any test having a dependency with zone.js raises the error below, even though the app builds/run properly.

Test suite failed to run
    Zone already loaded.
      at node_modules/zone.js/dist/zone-node.js:32:15
      at node_modules/zone.js/dist/zone-node.js:646:3
      at Object.<anonymous>.FUNCTION (node_modules/zone.js/dist/zone-node.js:9:65)
      at Object.<anonymous> (node_modules/zone.js/dist/zone-node.js:12:2)
      ...

Btw, I also opened this issue on zone.js https://github.com/angular/zone.js/issues/963

[Hotell]

is this still an issue ? not experiencing this at all -> angular 5.x

[thymikee]

@jbgraug can we close it?

[jbgraug]

Still got the same error, my solution was to stick to version 3.x
Tried version 5, still failing with the same error.

[jbgraug]

What's the problem of importing zone.js the "right way"?
In zone.js package.json they already have both properties "main" and "browser" set up.
Why override this functionality in importing "zone.js/dist/zone" when the right version is going to automatically be picked up?

Please take a look here https://github.com/angular/zone.js/issues/963

[patrickmichalina]

This break testing with newer versions of angularfire2

[thymikee]

Does it unbreak with #135? I didn't have the capacity to test it yet

[patrickmichalina]

@thymikee for me yes. I actually have to use a script to apply this patch for my tests to run when firebase modules are referenced. Since they added Universal support, it appears zone.js is loaded on their dep chain somewhere.

[Hotell]

@patrickmichalina if you could provide an example repo with the issue, it would help us/me, to incorporate it against whole angular.io testsuite that I migrated to jest recently :)

[patrickmichalina]

@Hotell all my work is in pretty large apps, I might be able to. It is def. specific to AngularFire2 rc-next-7.0 (the latest as of this week)

[Hotell]

So switching to load just zone.js within setupJest.js and let environment load what it needs by package.json metadata makes angular.io test suite fail. ( in jest it uses main field which loads zone-node.js )

• with explicitly loading browser version of zone.js ( same as karma is doing ):

• loading just default zone.js with env resolution by metadata ( which loads zone-node.js ) because node consumes main field by default:

[Hotell]

What's the problem of importing zone.js the "right way"?
In zone.js package.json they already have both properties "main" and "browser" set up.
Why override this functionality in importing "zone.js/dist/zone" when the right version is going to automatically be picked up?

we are doing the same as standard angular cli karma config, so it is the right way already :)

[Hotell]

Also the obvious problem is that angular-fire is importing directly zone.js within their index file. That's where the clash comes from because zone.js has no throw/catch mechanism to handle this properly

[jbgraug]

@Hotell setupJest.ts
Line 5 should be commented out instead of line 6
zone.js has both browser and main attributes so the correct one will be picked depending on the case.

https://github.com/angular/zone.js/blob/master/package.json#L6

[hashtician]

Also encountering this issue.