[Bug]: latest zone.js v0.13.2 is causing import error #2162

ghiscoding · 2023-09-12T01:23:29Z

Version

13.1.1

Steps to reproduce

clone my repo at https://github.com/ghiscoding/Angular-Slickgrid/
bump zone.js to v0.13.2
yarn install # yarn classic
yarn jest:coverage # or yarn jest:watch

Expected behavior

No error thrown

Actual behavior

I'm getting the following error (which can be seen under this GitHub Action PR failure)

$ jest --runInBand --coverage=true --ci --config ./test/jest.config.ts
FAIL src/app/modules/angular-slickgrid/components/__tests__/angular-slickgrid.component.spec.ts
  ● Test suite failed to run

    Cannot find module 'zone.js/bundles/zone-testing-bundle.umd' from 'node_modules/jest-preset-angular/setup-jest.js'

    Require stack:
      node_modules/jest-preset-angular/setup-jest.js
      test/setup-jest.ts

    > 1 | import 'jest-preset-angular/setup-jest';
        | ^
      2 | import './jest-global-mocks';

      at Resolver._throwModNotFoundError (node_modules/jest-resolve/build/resolver.js:42[7](https://github.com/ghiscoding/Angular-Slickgrid/actions/runs/6153316033/job/16697173514?pr=1250#step:10:8):[11](https://github.com/ghiscoding/Angular-Slickgrid/actions/runs/6153316033/job/16697173514?pr=1250#step:10:12))
      at Object.<anonymous> (node_modules/jest-preset-angular/setup-jest.js:1:1)
      at Object.<anonymous> (test/setup-jest.ts:1:1)

Additional context

The error came from Renovate which runs once a week in my project, the dependency zone.js was updated less than a day ago and the import issue seem to come from this Angular PR and I'm not sure if the problem occurs in Angular or in Jest-Preset-Angular but I think it's latter and some imports might need to be updated as per the Angular PR

Note: to verify that zone.js was really causing the issue, I have added it to Renovate skipped dependency in this commit and that allowed me to confirm the zone.js was the root cause (though I'm not sure if the fix would be in Angular or in Jest-Preset-Angular)

EDIT

A temp fix was implemented in Angular by adding back certain temp imports in this Angular PR 51737, however please note that this is a temp fix and is expected to be removed in zone.js@0.14.0, see comment below

Environment

System:
    OS: Windows 10 10.0.19045
    CPU: (12) x64 Intel(R) Xeon(R) CPU E5-1650 v2 @ 3.50GHz 
  Binaries:
    Node: 18.17.1 - C:\Program Files\nodejs\node.EXE        
    Yarn: 1.22.19 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 9.8.1 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.6.1 - C:\Program Files\nodejs\pnpm.CMD
  npmPackages:
    jest: ^29.6.3 => 29.6.3

The text was updated successfully, but these errors were encountered:

ocombe · 2023-09-12T05:35:37Z

I have the same error, everything was working fine last night, and now all of my tests are broken https://github.com/teambit/envs-health-status/actions/runs/6153094762/job/16696392467

ocombe · 2023-09-12T05:43:32Z

zone.js/bundles/zone-testing-bundle.umd has been renamed zone.js/bundles/zone-testing.umd in the last package

alan-agius4 · 2023-09-12T05:52:53Z

Looks like jest-preset-angular is using deep imports, instead of consuming the “public” entry-points

IE

jest-preset-angular/setup-jest.mjs

Line 1 in 65a848a

import 'zone.js/fesm2015/zone-testing-bundle.min.js';

Instead of something like;

import 'zone.js/testing';

That being said, it’s a bit unclear how the zone-testing-bundle should be consumed.

I think as an interim for v0.13.x we could re-allow deep imports and remove them in v0.14.x.

//cc @JiaLiPassion.

`jest-preset-angular` imports `zone.js` using deep imports. This commit temporary allow this until the correct entry-points are used upstream. See: thymikee/jest-preset-angular#2162

see: thymikee/jest-preset-angular#2162

Sebastian-G · 2023-09-12T13:08:38Z

Also occurs for new angular builders:

       "test": {
          "builder": "@angular-builders/jest:run",
          "options": {
            "tsConfig": "tsconfig.spec.json",
            "polyfills": ["zone.js", "zone.js/testing"]
          }
        }

fixed by enforcing zone.js version 0.13.1

Tallyb · 2023-09-12T13:47:48Z

#2162

`jest-preset-angular` imports `zone.js` using deep imports. This commit temporary allow this until the correct entry-points are used upstream. See: thymikee/jest-preset-angular#2162 PR Close #51737

alan-agius4 · 2023-09-12T18:46:07Z

zone.js version 0.13.3 has been just released which should get around this issue.

Deep imports will eventually no longer be allowed from zone.js version 0.14.0.

The proper way to use zone testing is the following:

import "zone.js";
import "zone.js/testing";

ghiscoding · 2023-09-12T18:57:19Z

indeed the temp fix seems to work now, but I guess it's probably better to keep this issue open until a proper fix is implemented. Thanks for the info and quick turnaround about the Angular upstream :)

Close thymikee#2162 From zone.js 0.13.2, the original `zone.js/bundles/zone-testing-bundle.js` is not easily import and will eventually removed from zone.js 0.14.0. The proper way to import zone.js and zone.js/testing is ``` import 'zone.js'; import 'zone.js/testing'; ``` So this PR use this way to import zone.js related bundles.

Close #2162 From zone.js 0.13.2, the original `zone.js/bundles/zone-testing-bundle.js` is not easily import and will eventually removed from zone.js 0.14.0. The proper way to import zone.js and zone.js/testing is ``` import 'zone.js'; import 'zone.js/testing'; ``` So this PR use this way to import zone.js related bundles.

SmailHammour · 2023-11-02T12:39:43Z

Since Angular v17 will require Zone.js version 0.14.x or later, this is still an issue?

timothee-dhenain-zenika · 2023-11-11T16:57:40Z

It's still an issue with the latest version of Angular (17.0.2), all of our tests are broken as well after upgrading. This is our following package.json:

"dependencies": {
    "@angular/animations": "~17.0.2",
    "@angular/common": "~17.0.2",
    "@angular/compiler": "~17.0.2",
    "@angular/core": "~17.0.2",
    "@angular/forms": "~17.0.2",
    "@angular/localize": "~17.0.2",
    "@angular/platform-browser": "~17.0.2",
    "@angular/platform-browser-dynamic": "~17.0.2",
    "@angular/router": "~17.0.2",
    "@angular/service-worker": "~17.0.2",
    "@ngrx/effects": "~16.3.0",
    "@ngrx/store": "~16.3.0",
    "rxjs": "~7.8.1",
    "tslib": "~2.6.1",
    "zone.js": "~0.14.2"
  },
  "devDependencies": {
    "@angular-builders/jest": "~16.0.0",
    "@angular-devkit/build-angular": "~17.0.0",
    "@angular-eslint/builder": "~17.0.1",
    "@angular-eslint/eslint-plugin": "~17.0.1",
    "@angular-eslint/eslint-plugin-template": "~17.0.1",
    "@angular-eslint/schematics": "~17.0.1",
    "@angular-eslint/template-parser": "~17.0.1",
    "@angular/cli": "~17.0.0",
    "@angular/compiler-cli": "~17.0.2",
    "@types/jest": "~29.5.3",
    "jest": "~29.6.2",
    "jest-canvas-mock": "~2.5.2",
    "jest-preset-angular": "~13.1.3",
    "typescript": "~5.2.2",
  }

And our angular.json configuration:

"test": {
        "builder": "@angular-builders/jest:run",
        "options": {
          "tsConfig": "tsconfig.spec.json",
          "configPath": "jest.config.js",
          "assets": ["src/favicon.ico", "src/assets"],
          "styles": ["src/styles.scss"],
          "scripts": []
        }
      },

FAIL src/app/shared/components/features/search/components/search-companies/components/search-companies-by-id/pipe/search-companies-by-id-placeholder.pipe.spec.ts
● Test suite failed to run

Cannot find module 'zone.js/bundles/zone-testing-bundle.umd' from 'node_modules/@angular-builders/jest/node_modules/jest-preset-angular/setup-jest.js'

Require stack:
  node_modules/@angular-builders/jest/node_modules/jest-preset-angular/setup-jest.js
  node_modules/@angular-builders/jest/dist/jest-config/setup.js

alexus85 · 2023-11-13T11:20:25Z

updating to the latest version (13.1.4) seem to have solved the issue for me.

karoldydo · 2023-11-13T21:13:03Z

Update package "@angular-builders/jest": "^17.0.0" solve the problem.

`jest-preset-angular` imports `zone.js` using deep imports. This commit temporary allow this until the correct entry-points are used upstream. See: thymikee/jest-preset-angular#2162 PR Close angular#51737

IndyRa87 · 2024-04-26T11:06:49Z

Hi @alexus85 which package was updated to 13.1.4?

I am facing similar issue in my application when I update my angular to 16 and zone.js to 0.14.4. When I looked for reference, the only place where I see its been used is in the polyfills.ts

`Test suite failed to run

Cannot find module 'zone.js/bundles/zone-testing-bundle.umd' from '../../node_modules/jest-preset-angular/setup-jest.js'

Require stack:
  node_modules/jest-preset-angular/setup-jest.js
  src/test-setup.ts

  1 | import '@testing-library/jest-dom';
> 2 | import 'jest-preset-angular/setup-jest';
    | ^
  3 |
  4 | // eslint-disable-next-line @typescript-eslint/no-empty-function
  5 | const noop = () => {};

  at Resolver._throwModNotFoundError (../../node_modules/jest-resolve/build/resolver.js:427:11)
  at Object.<anonymous> (../../node_modules/jest-preset-angular/setup-jest.js:1:103)
  at Object.<anonymous> (src/test-setup.ts:2:1)`

IndyRa87 · 2024-04-26T11:07:30Z

@timothee-dhenain-zenika where you able to resolve your issue, if so what was the fix? Thanks

ghiscoding added Bug Report Needs Triage labels Sep 12, 2023

ocombe mentioned this issue Sep 12, 2023

release: cut the zone.js-0.13.2 release angular/angular#51689

Closed

alan-agius4 mentioned this issue Sep 12, 2023

Zonejs package exports fixes angular/angular#51737

Closed

shu-mutou mentioned this issue Sep 12, 2023

chore(deps): bump zone.js from 0.13.1 to 0.13.2 in /modules/web kubernetes/dashboard#8275

Closed

ocombe added a commit to teambit/bit-angular that referenced this issue Sep 12, 2023

fix: pin zone.js version to avoid issue with jest

12ef621

see: thymikee/jest-preset-angular#2162

ghiscoding mentioned this issue Sep 12, 2023

chore(deps): update zone.js to latest with ng-preset-jest regression fix ghiscoding/Angular-Slickgrid#1253

Merged

JiaLiPassion mentioned this issue Sep 13, 2023

refactor: import zone.js/testing instead of zone-testing-bundle #2163

Merged

ahnpnl closed this as completed in #2163 Sep 13, 2023

kcinay055679 mentioned this issue Sep 15, 2023

Feature/396 upgrade angular puzzle/okr#403

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Bug]: latest zone.js v0.13.2 is causing import error #2162

[Bug]: latest zone.js v0.13.2 is causing import error #2162

ghiscoding commented Sep 12, 2023 •

edited

ocombe commented Sep 12, 2023

ocombe commented Sep 12, 2023

alan-agius4 commented Sep 12, 2023 •

edited

Sebastian-G commented Sep 12, 2023

Tallyb commented Sep 12, 2023

alan-agius4 commented Sep 12, 2023 •

edited

ghiscoding commented Sep 12, 2023

SmailHammour commented Nov 2, 2023 •

edited

timothee-dhenain-zenika commented Nov 11, 2023 •

edited

alexus85 commented Nov 13, 2023

karoldydo commented Nov 13, 2023

IndyRa87 commented Apr 26, 2024 •

edited

IndyRa87 commented Apr 26, 2024

[Bug]: latest zone.js v0.13.2 is causing import error #2162

[Bug]: latest zone.js v0.13.2 is causing import error #2162

Comments

ghiscoding commented Sep 12, 2023 • edited

Version

Steps to reproduce

Expected behavior

Actual behavior

Additional context

Environment

ocombe commented Sep 12, 2023

ocombe commented Sep 12, 2023

alan-agius4 commented Sep 12, 2023 • edited

Sebastian-G commented Sep 12, 2023

Tallyb commented Sep 12, 2023

alan-agius4 commented Sep 12, 2023 • edited

ghiscoding commented Sep 12, 2023

SmailHammour commented Nov 2, 2023 • edited

timothee-dhenain-zenika commented Nov 11, 2023 • edited

alexus85 commented Nov 13, 2023

karoldydo commented Nov 13, 2023

IndyRa87 commented Apr 26, 2024 • edited

IndyRa87 commented Apr 26, 2024

ghiscoding commented Sep 12, 2023 •

edited

alan-agius4 commented Sep 12, 2023 •

edited

alan-agius4 commented Sep 12, 2023 •

edited

SmailHammour commented Nov 2, 2023 •

edited

timothee-dhenain-zenika commented Nov 11, 2023 •

edited

IndyRa87 commented Apr 26, 2024 •

edited