bug: Upgrade jest to v28

[Tallyb]

Prerequisites

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

Stencil Version

2.15.1

Current Behavior

Errors when upgrading jest to v28

Expected Behavior

Stencil to work with jest 28 after installing peer deps

Steps to Reproduce

Run npm t on the attached repo (branch jest-28) you can see the errors here: https://github.com/Tallyb/stencil-one/actions/runs/2247154163

Code Reproduction URL

https://github.com/Tallyb/stencil-one/tree/jest-28

Additional Information

No response

[rwaskiewicz]

Hey @Tallyb 👋

You're correct that Jest 28 isn't compatible with Stencil at the moment. At this time, Stencil doesn't support Jest 28, although it's something we'll be working on in the future. We will likely be working through migrating Stencil internally to jest-circus, internally moving to Jest 28, then adding support for end users. For full transparency, this is not currently at the top of our priority list. The good news is that we've learned quite a bit from adding Jest 27 support, and hope to leverage that knowledge to expedite implementing Jest 28 support when the time comes.

In the next release of Stencil, we will be shipping an update to our CLI that makes it clearer to folks what versions of Jest we do and don't support. Today, installing a new major version of Jest and running a test script is a bit of a gamble - will it work? will it not? We hope that we can be a little clearer about what we do/don't support in the CLI so that folks aren't greeted with a stack trace when trying to run their tests.

[Tallyb]

Well, specifying supporting version is far from being a solution to the issue. With the ecosystem moving forward, it is no use being left behind. Is Stenciljs a dead project by now?

[ghaiat]

Hello, any update on this? Angular 14 has jest 28, we cannot uprade until this is fixed. it s been opened for quite a while....

[rwaskiewicz]

Hey folks,

At this time, we don’t have anything new to share on Jest 28 support, other than it is still on our radar.

Stencil is still very much an active project, that works with the open source community, the Ionic Framework, Ionic’s Enterprise customers and our internal engineering team to accept & prioritize work on the project. We ask that folks be patient while we balance the different asks we receive from these various groups.

Thanks for your understanding,

The Stencil Team

[Tallyb]

For those interested, here is a hack for working with test specs (not with e2e) that you can use meanwhile:

1. If you are using stencil spec -> extract the stencil configuration to a jest.config.ts file. Your jest config should include

      preset: '@stencil/core/testing',

and then any additional configuration that is relevant for your project.

2. Disable the stencil puppeteer environment by defining

      testEnvironment:'node',

3. Use patch-package (https://www.npmjs.com/package/patch-package) to fix the return value of the transformer. This is the diff generated by patch-package

diff --git a/node_modules/@stencil/core/testing/index.js b/node_modules/@stencil/core/testing/index.js
index 53490e1..2d7c1e1 100644
--- a/node_modules/@stencil/core/testing/index.js
+++ b/node_modules/@stencil/core/testing/index.js
@@ -1339,7 +1339,7 @@ const jestPreprocessor = {
     const e = i.diagnostics.map(formatDiagnostic).join("\n\n");
     throw new Error(e);
    }
-   return i.code;
+   return {code: i.code};
   }
   return e;
  },

The change is in the file @stencil/core/testing/index.js changing line 1334 from return i.code to return {code: i.code}; You can see the reason here: https://jestjs.io/docs/upgrading-to-jest28#transformer (add patch-package to your postinstall script, as defined on the package)

Then it should work with jest 28

[daragh-king-genesys]

@rwaskiewicz any update on this? Is it possible yet to estimate when this will get prioritised?

[maidi29]

@rwaskiewicz any update on this? Would be cool to use @GlennLefeveres fix

[rwaskiewicz]

👋

I have this work scheduled to begin early next year. Our aim will be to support Jest 28, 29 in a backwards compatible manner while making it easier to support Jest 30+ when newer major versions are released. We have a few goals in mind for that work:

• Backwards compatibility: There should always be overlap in Jest support between Stencil versions. That is, supporting a new version of Jest should (ideally) not cause a breaking change in Stencil. Use case: A project on Stencil v2.20.0 and Jest 27 should be able to upgrade to Stencil v2.Y.Z and still be able to use Jest 27 (even if v2.Y.Z supports Jest 28).
• Backwards compatibility: There should always be some overlap in Jest support between major Stencil versions. Use case: A project on Stencil v2.20.0 and Jest 27 should be able to upgrade to Stencil v3.0.0 and still be able to use Jest 27 (and upgrade Jest at a later time).
• Faster turnaround time in supporting new versions of Jest

Due to the changes in Jest 28+, this work is going to be quite substantial for Stencil to support (otherwise we'd have done it already 😉). We do have some design documents/plans established, next steps are to just do it.

Disclaimer: Priorities can change, so while as of this writing this work is scheduled for early next year, that can shift forward and backwards (and this comment may not be updated if it does)

[dgonzalezr]

@rwaskiewicz this is definitely a blocker for those using Nx and wanting to migrate to their latest version 😞 . We are stuck with Nx 14 while knowing that Nx 15 shifts a lot of new stuff and improvements that we cannot get the advantage of.

[ghaiat]

hello. any updates here? we re early 2023...

[sean-perkins]

@ghaiat the team is regrouping after delivering the new major release of Stencil last week (v3.0.0).

Ryan's comment here is still the best reflection of where this issue stands: https://github.com/ionic-team/stencil/issues/3348#issuecomment-1340958144

The team has designed the work behind adding Jest 28+ support and is prioritizing the roadmap for the upcoming year. The team will share an update when that work is available for testing or released to the public.

Thanks!

[Tallyb]

PAtch for stencil 3.0:

diff --git a/node_modules/@stencil/sass/.DS_Store b/node_modules/@stencil/sass/.DS_Store
new file mode 100644
index 0000000..e69de29
diff --git a/node_modules/@stencil/sass/dist/index.js b/node_modules/@stencil/sass/dist/index.js
index 42bda03..c989ed2 100644
--- a/node_modules/@stencil/sass/dist/index.js
+++ b/node_modules/@stencil/sass/dist/index.js
@@ -248,7 +248,8 @@ function getRenderOptions(opts, sourceText, fileName, context) {
                 }
             }
             const importTerminator = renderOpts.indentedSyntax ? '\n' : ';';
-            return `@import "${injectGlobalPath}"${importTerminator}`;
+            return `@use "${injectGlobalPath}" as *${importTerminator}`;
+            //return `@import "${injectGlobalPath}"${importTerminator}`;
         })
             .join('');
         renderOpts.data = injectText + renderOpts.data;
diff --git a/node_modules/@stencil/sass/dist/util.js b/node_modules/@stencil/sass/dist/util.js
index 24590e2..d3edece 100644
--- a/node_modules/@stencil/sass/dist/util.js
+++ b/node_modules/@stencil/sass/dist/util.js
@@ -59,7 +59,8 @@ export function getRenderOptions(opts, sourceText, fileName, context) {
                 }
             }
             const importTerminator = renderOpts.indentedSyntax ? '\n' : ';';
-            return `@import "${injectGlobalPath}"${importTerminator}`;
+            return `@use "${injectGlobalPath}" as *${importTerminator}`;
+            //return `@import "${injectGlobalPath}"${importTerminator}`;
         })
             .join('');
         renderOpts.data = injectText + renderOpts.data;

[sebastiandg7]

@Tallyb With the v3 release, do you think we are close to having Jest 28+ available?

[sarahquigley]

Any news on this? Stencil is lagging several versions behind at this point, and it would be great to be able to upgrade. Particularly causes issues in an NX setting.

[dgateles]

Jest is already in version 29.5.1 and no support so far.

[theo-staizen]

@Tallyb do you have a fork with your fixes? or are you using patch-package to patch stencil code?

[Tallyb]

Patch-package

[sarahquigley]

This issue has been open for over a year now and the supported jest version is very out of date. Any timeline on supporting latest jest?

[katja-brunner]

Updating to Stencil 3.3.1 allows Typescript update to 5.1.3. But Typescript 5+ is not accepted by ts-jest 27+, so it is required to update ts-jest to 29+, what requires all jest dependencies to update to 29+. But as Stencil is still not supporting jest 29+ we cannot use latest Typescript. So now we have another dependency we cannot update due to this bug. This is very annoying. When will there be a solution?

[rwaskiewicz]

Hey folks 👋

Support for newer versions of Jest will be our next item to tackle. We made the decision to remove additional technical debt/unused Stencil functionality in favor of Jest support this past spring. Please keep in mind, this was not a decision that was taken lightly.

---

Our plan as of this writing is to begin supporting Jest 29 in the near future. Our desire is for this to be the first step in decoupling Jest from Stencil. Today, Stencil's supported testing stack includes:

• Jest 24 thru 27
• Puppeteer 10 thru 20

However, we are interested in hearing what folks are using today outside of this stack/why. We're also interested in hearing what folks would like to use and why. To that end, I've created 🧪 Stencil Testing Packages Infrastructure for folks to add their feedback.

[rwaskiewicz]

Updating to Stencil 3.3.1 allows Typescript update to 5.1.3. But Typescript 5+ is not accepted by ts-jest 27+, so it is required to update ts-jest to 29+, what requires all jest dependencies to update to 29+. But as Stencil is still not supporting jest 29+ we cannot use latest Typescript. So now we have another dependency we cannot update due to this bug. This is very annoying. When will there be a solution?

@katja-brunner

Please note that Stencil does not support TypeScript 5.1 at this time. We do not support/integrate directly with ts-jest either. We'd be super interested in hearing more about this use case - would you mind opening a discussion in 🧪 Stencil Testing Packages Infrastructure so we could learn more

[sarahquigley]

Is there any specific timeline for this work as yet?

[rwaskiewicz]

The fix for this issue has been released as a part of today's Stencil v4.7.0 release. Should the issue reappear, please feel free to open a new ticket. Thanks!