Angular CLI 15.1.4 breaks ng test with jsdom because CLI is loading JavaScript bundles as module

Open
#24,778 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
35/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
angular, typescript
Domain
cli, testing

Research direction

Reproduce the issue from the linked repository with npm run test:chrome and npm run test:jsdom, then inspect the Angular CLI test command and its JavaScript bundle loading. Done means jsdom tests run without the patch while Chrome tests continue to pass, with a way to add or omit type="module".

Written by the indexing model from the issue text.

Description

area: @angular-devkit/build-angular devkit/build-angular:karma freq1: low severity5: regression type: bug/fix
Command

test

Is this a regression?
  • Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was

15.1.3

Description

I have a standard Angular project, using Karma & Jasmine for unit tests. The unit tests run can run in either Chrome or jsdom. I need jsdom because my CI environment doesn't have Chrome (org policy: no browsers on servers).

Angular CLI 15.1.4 introduced a change in https://github.com/angular/angular-cli/pull/24620 wherein Javascript bundles are loaded as modules.

Unfortunately, jsdom doesn't support <script type="module">; it simply doesn't load the module scripts. This is a known issue in jsdom - https://github.com/jsdom/jsdom/issues/2475

Ideally jsdom would add module support; but since that ticket has been open for four years, I'm not holding out much hope. So instead, here's my request:

REQUEST: Could Angular CLI add a flag to add/omit type="module" ?

My workaround for now is patching jsdom (using patch-package) to ignore the type attribute on <script type="module">.

Minimal Reproduction

Clone my git repo: https://github.com/andrewpmontgomery/angular-15-jsdom

  1. Run npm install
  2. Run npm run test:chrome and all three tests should pass.
  3. Run npm run test:jsdom and it should time-out.
  4. Run npm run patch-package
  5. Run npm run test:jsdom again and now it works.
Exception or Error

No response

Your Environment
Angular CLI: 15.2.0
Node: 16.19.1
Package Manager: npm 8.19.3
OS: win32 x64

Angular: 15.2.0
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1502.0
@angular-devkit/build-angular   15.2.0
@angular-devkit/core            15.2.0
@angular-devkit/schematics      15.2.0
@schematics/angular             15.2.0
rxjs                            7.8.0
typescript                      4.9.5
Anything else relevant?

No response

Dominant language
TypeScript
Stars
27k
Forks
11.8k
Avg merge
16h 35m
Merged PRs (30d)
176

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from angular/angular-cli

All issues in angular/angular-cli

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.