feat: Support ES modules in jest tests

[johncrim]

Prerequisites

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

Describe the Feature Request

Stencil tests should be able to run using Jest ES Module support, instead of transpiling all ESM modules to CJS. This needs to be done to improve test perf, and because ESM is preferred in all modern projects that are used in browsers.

Right now, stencil jest support hard-codes CJS output: https://github.com/ionic-team/stencil/blob/main/src/testing/test-transpile.ts

Describe the Use Case

When I run stencil tests, I should have the option to run them in Jest ESM mode.

The lack of this feature causes bugs and wasted dev effort, eg: #2178

Performance should be improved b/c .mjs files (most dependencies) will no longer need to be transpiled. Dev cycle speed is important!

In addition, there are behavioral differences between CJS and ESM, and it's valuable for the test environment to be as similar as possible to the runtime environment.

Describe Preferred Solution

A config option exists for running tests in Jest ESM mode.

Describe Alternatives

No response

Related Code

No response

Additional Information

https://kulshekhar.github.io/ts-jest/docs/next/guides/esm-support/

Related issues:

• Changes to extension ordering in moduleFileExtensions breaks jest tests #2608
• SyntaxError: Cannot use import statement outside a module #2178

I'm willing to work on a PR for this - looks like it shouldn't be too hard.

[rwaskiewicz]

Hey @johncrim 👋

I agree that Stencil should support ES Modules when using Jest. To be honest, I had not been considering this support until Jest's ESM support came out of it's 'experimental' phase. But if you're interested, I say go for it!

[johncrim]

Thanks @rwaskiewicz . I certainly understand waiting until the experimental phase ends - I can't fault you for that, though I don't know how long it will remain in experimental.

It's working acceptably with ts-jest and jest + angular (though still a little bumpy). I just migrated our angular jest tests to Jest ESM and would like to tackle this as long as it's not too involved (from a code review it looks pretty straightforward, but I could certainly be wrong about that).

[johncrim]

Hi @rwaskiewicz - I have a working PR that works great for our projects. Lmk when you have time to review.

[rwaskiewicz]

Hey @johncrim - I haven't forgotten about this, I'll circle back as soon as I get a chance

[subasically]

any updates on this?

[johncrim]

Hi @rwaskiewicz - the PR may be outdated (I don't know what has changed since I created it), but would be great to get either my PR merged, or this fixed some other way.

[rwaskiewicz]

@johncrim

Agreed - I've done a little work internally to make Jest easier to upgrade (and easier to change things like ESM support). I'm hoping to move to the prototyping stage later this week, from there I hope to be able to be in a better place to determine how we can work with this PR