Support Testing with imports of JS files in ESM

[daraclare]

Current Behavior

When running test files with that contain ES6 module imports with Jest, I get the following error:

Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

Is there an existing recommendation for handling ES6/ESNext module imports, if so, could we add documentation around this? If it doesn't exist, could we add recommendation on how to handle it? I'm happy to help if I can. Could this be a TSDX feature, to switch on and off?

Desired Behavior

Either handled by default by TSDX, or there is clear recommendations on how best to handle this.

Suggested Solution

Happy to add docs with the recommendation to resolve, although I'm not sure what the recommendations are as yet.

Who does this impact? Who is this for?

Users importing other packages that use ES6.

Describe alternatives you've considered

I considered using babel-jest and configuring it myself, but this seems to make TSDX a little redundant.

[swyxio]

gd qtn. i honestly have no idea. should we recommend that test files are also in typescript? that would be another angle to this.

[daraclare]

Our tests are written in typescript and work fine, until we try to import another package of ours from the NPM registry, which is compiled to ES6. Then Jest complains about that test, with the error above. It still runs other tests that don't import packages in ES6. I'm assuming this is a common enough issue, maybe it's not 🤔

[jaredpalmer]

Very possible, due to the design goals of tsdx, this doesn’t surprise me. Have you tried setting the allowJs flag in tsconfig to true?

[jaredpalmer]

Sorry I may have misread, tsdx is not compiling node_modules at the moment with babel (like CRA does) IIRC. We might want to fix that.

[daraclare]

What would you recommend as a workaround for now, should we add this to the docs?

[daraclare]

Thanks for the quick replies both, btw!

[swyxio]

fyi CRA stopped compiling node_modules in v2

[daraclare]

I don't think we'd want to compile all our node_modules, just ones that are imported into tests, is that possible I wonder? What would be the best practice for resolving this with TSDX?

[mikecousins]

Yeah this one is really biting me currently,as the library that I develop wraps up an es6 module so none of my tests work. If anyone has any hints for how to get this working that would be great.

[zhaoyao91]

A quite common case: I use lodash-es in my project, so the test just boomed.

[agilgur5]

So this was fixed by my #486 very recently. Though if you want to transpile something from node_modules in your tests, you'll have to override transformIgnorePatterns in a jest.config.js as by default it doesn't transpile node_modules (that's part of Jest's default behavior)