bug: Last version 4.18.2 breaks unit test in the proyect.

[phyr0s]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Stencil Version

4.18.2

Current Behavior

When running unit test error appeared.

ERROR: 'Unhandled Promise rejection:', 'Failed to set the 'adoptedStyleSheets' property on 'Document': Failed to convert value to 'CSSStyleSheet'.', '; Zone:', '', '; Task:', 'requestAnimationFrame', '; Value:', TypeError: Failed to set the 'adoptedStyleSheets' property on 'Document': Failed to convert value to 'CSSStyleSheet'.
TypeError: Failed to set the 'adoptedStyleSheets' property on 'Document': Failed to convert value to 'CSSStyleSheet'.
at addStyle (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@stencil/core/internal/client/index.js:664:44)
at attachStyles (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@stencil/core/internal/client/index.js:674:20)
at http://localhost:9876/_karma_webpack_/webpack:/node_modules/@stencil/core/internal/client/index.js:1458:5

Expected Behavior

Run test

System Info

CPU m2 max
node 18.20.2
TypeScript 5.4.5
Compiler node_modules/@stencil/core/compiler/stencil.js
Terser 5.31.0
Jquery 4.0.0-pre
Rollup 2.56.3
Stencil 4.18.2
Platform darwin 23.5.0

Steps to Reproduce

npm install and run unit test

Code Reproduction URL

Additional Information

[GusLAN]

I was experiencing the same error, so I had to add this override in my package.json to make it work:

"overrides": {
    "@ionic/angular": {
        "@stencil/core": "4.18.1"
    }
}

It's a temporary workaround until it's resolved.

[ionitron-bot]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Stencil starter component library and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[KillerCodeMonkey]

seems like adoptedStyleSheets is not supported by jsdom. question is why this stencil code is executed now and not before. because this code part is there in the stencil code for a long time.

jsdom/jsdom#3444
https://github.com/ionic-team/stencil/blame/5f4fcfa12e701ece8884aa1e3b3143bd2221e0a0/src/runtime/styles.ts#L103

i am getting this error in an ionic project using ionic/angular/standalone components and jest

i can confirm it is working with 4.18.1

[christian-bromann]

seems like adoptedStyleSheets is not supported by jsdom.

If you use stencil test you don't use JSDOM but something we call MockDoc which is the Stencil version of MockDoc. There we may also not supported this interface, however I couldn't find an obvious change between v4.18.1 and v4.18.2 that could have caused this. A reproducible example would be helpful to do investigations here.

[Floscho2402]

I'm facing a similar issue since I updated my Ionic-Project from v7 to v8. I created a basic demo project. Just do "npm install" and "ng test". When adding the workaround with stencil version 4.18.1 like mentioned above, it's working.

Github Repo with example: https://github.com/Floscho2402/ionic-8-jest-issue

[christian-bromann]

Thank you @Floscho2402 for providing the reproduction case. I will take a look as soon as i can.

[christian-bromann]

@Floscho2402 I checked out your reproduction case and struggle to reproduce the case. I've done the following:

❯ g clone https://github.com/Floscho2402/ionic-8-jest-issue.git
Cloning into 'ionic-8-jest-issue'...
...
Resolving deltas: 100% (2/2), done.
❯ cd ionic-8-jest-issue/
❯ npm i
...

added 1735 packages, and audited 1736 packages in 38s

219 packages are looking for funding
  run `npm fund` for details

2 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
❯ npx ng test
...

 PASS  src/app/pages/maintenance/components/demo/demo.component.spec.ts (15.494 s)
  DemoComponent
    ✓ should create (43 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        16.988 s
Ran all test suites.

Even after removing the given Stencil dependency from @ionic/core and installing @latest I still get a passing test.

[Floscho2402]

@christian-bromann I am really surprised. I have no idea why it works for you. Before I uploaded the code, I checked it with a colleague and he also gets the same error as me. To be sure I tried it again and deleted my node_modules, ran "npm cache clear --force" and "jest --clearCache". Then I reinstalled everything and still got the error.

I don't know, if it's relevant for you, but this is my ionic info output:

Ionic:

Ionic CLI : 7.2.0 (C:\Users\flori\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 8.2.2
@angular-devkit/build-angular : 17.3.8
@angular-devkit/schematics : 17.3.8
@angular/cli : 17.3.8
@ionic/angular-toolkit : 11.0.1

Utility:

cordova-res : not installed globally
native-run : not installed globally

System:

NodeJS : v18.15.0 (C:\Program Files\nodejs\node.exe)
npm : 9.5.0
OS : Windows 10

[christian-bromann]

This will be fixed in #5838. You can use a dev release by running npm install @stencil/core@4.18.3-dev.1718732340.9701d1e. Please let me know if this still causes issues.