Ts-jest: Importing packages written ESM

[screendriver]

Is it possible to import packages that are written in ESM? For example in my TypeScript project I have a dependency to react-dates@next which is written in ECMAScript module syntax (import / export). In my webpack build everything works fine because webpack understands natively ESM. But in my Jest tests I get SyntaxError: Unexpected token import in

/my/project/node_modules/date-fns/esm/addDays/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import toDate from '../toDate/index.js'

One solution would be to include babel-jest as it's written in the official Jest docs and modify my config to

"transform": {
  "^.+\\.js$": "babel-jest",
  "^.+\\.tsx?$": "ts-jest"
},

This works in my case but I don't want to clutter my project with Babel stuff just for tests. Additionally the tests are getting really slow and Babel complains with

[BABEL] Note: The code generator has deoptimised the styling of "/Users/me/development/my-project/node_modules/ty
pescript/lib/typescript.js" as it exceeds the max of "500KB".

So it seems that Babel is transpiling *all my dependencies.

Is it possible to achieve the same with ts-jest? I also tried to modify my tsconfig.json to let TypeScript compile to "module": "commonjs" and set "transformIgnorePatterns": ["<rootDir>/node_modules/react-dates"] but this doesn't work. It seems that the source files from date-fns doesn't get passed to ts-jest. I could provide a small test project if you want.

[kulshekhar]

@screendriver I'm not sure about this one way or another. Could you create a minimal repo for this? I'll be happy to take a look at it

[GeeWee]

I think this is because jest by default doesn't transpile anything in node modules.

Perhaps the following could be of assistance: https://facebook.github.io/jest/docs/en/tutorial-react-native.html#transformignorepatterns-customization

[kulshekhar]

That was my first thought as well but then babel-jest seems to be processing that so there must be something else, unless babel-jest processes files other than the ones passed in by Jest

[kulshekhar]

@screendriver do the instructions here work for you? https://github.com/kulshekhar/ts-jest/issues/390#issuecomment-351367425

[screendriver]

@screendriver do the instructions here work for you? #390 (comment)

@kulshekhar as I wrote in my first post I could use babel-jest as it's written in the official Jest docs but I don't want to clutter my project with Babel stuff just for tests. It does work but it's slow and complains about the file size of typescript.js in my node_modules. Furthermore TypeScript could transpile that stuff as well 😉

I think this is because jest by default doesn't transpile anything in node modules.

True. But there is an Jest option called modulePathIgnorePatterns for that. I tried that out with ts-jest but it does not work. Additionally babel-jest does not need to enable something. It works out of the box and transpiles installed dependencies (I don't know how)

Should I create a repo for you? You can try it out easily by yourself: just install date-fns@next and write a simple test that just imports a function from date-fns/esm. That's all.

[kulshekhar]

The linked comment had an option to solve that issue without babel-jest. I
was trying to ask whether that works for you

On Fri 22 Dec, 2017, 12:34 Christian Rackerseder, [e-mail]
wrote:

@screendriver https://github.com/screendriver do the instructions here
work for you? #390 https://github.com/kulshekhar/ts-jest/issues/390
(comment)

@kulshekhar https://github.com/kulshekhar as I wrote in my first post I
could use babel-jest
https://github.com/facebook/jest/tree/master/packages/babel-jest as
it's written in the official Jest docs
http://facebook.github.io/jest/docs/en/webpack.html but I don't want to
clutter my project with Babel stuff just for tests. It does work but it's
slow and complains about the file size of typescript.js in my node_modules.
Furthermore TypeScript could transpile that stuff as well 😉

I think this is because jest by default doesn't transpile anything in node
modules.

True. But there is an Jest option called modulePathIgnorePatterns
http://facebook.github.io/jest/docs/en/configuration.html#modulepathignorepatterns-array-string
for that. I tried that out with ts-jest but it does not work.
Additionally babel-jest does not need to enable something. It works out
of the box and transpiles installed dependencies (I don't know how)

Should I create a repo for you? You can try it out easily by yourself:
just install date-fns@next and write a simple test that just imports a
function from date-fns/esm. That's all.

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/kulshekhar/ts-jest/issues/398#issuecomment-353535925,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AKR_0K5ZcjdKLTz_d7glKubPztMg-H1Gks5tC1RigaJpZM4RJo_1
.

[screendriver]

Do you mean:

"transform": {
  "^.+\\.(t|j)sx?$": "ts-jest"
}

If yes: yes, I already tried that out as well. Doesn't work 😞

[kulshekhar]

Should I create a repo for you?

that would be very helpful

You can try it out easily by yourself: just install date-fns@next and write a simple test that just imports a function from date-fns/esm.

It's the other config (jest/tsconfig) that I want to ensure matches your setup. That's why a repo would be helpful

[screendriver]

No problem. Here we go 😉

[kulshekhar]

@screendriver I'm seeing the same error if I run tsc and then node build/index.js.

Whatever config can fix this should fix the issue you're facing. This isn't really a 'solution' but it's the best I could think of right now. I'll take a look again after work

[screendriver]

True. Webpack handles that correctly for example and there it works out of the box 😉 But webpack is not Node 🙃

Thanks for your help.

[StoneCypher]

I am having similar problems getting import through typescript under jest, and would appreciate this issue being remembered

[foisonocean]

Any updates?

[GeeWee]

I haven't had any time to look at it unfortunately :(

[frankwallis]

I think this does work but you need to get jest to transform these files using ts-jest - by default no files under node_modules are transformed but you can change this with configuration:

    "transformIgnorePatterns": ["node_modules/(?!(antd|rc-))"],

Will feed node-modules/antd/* and node_modules/rc-*/** through the transpiler. All other files under node_modules will be excluded as before.

Then you need to tell ts-jest to transpile javascript files, so in tsconfig.json add

   "allowJs": true

[frankwallis]

It would be nice if you could control the "allowJs" option from ts-jest configuration. Right now I have to create lots of duplicate tsconfig.json files just to turn this setting on in test.

[kulshekhar]

@frankwallis isn't extending the existing tsconfig.json file and pointing ts-jest to it sufficient for your use case?

[frankwallis]

@kulshekhar my situation is I have 10-15 packages which all extend a shared base tsconfig.json file and also use a shared jest.preset.json. It's proving quite difficult to toggle this setting only when running in jest.

[StoneCypher]

2.7 put up a new flag --esModuleInterop that may help, three days ago

[GeeWee]

Closing due to inactivity. If the solutions don't work for you - feel free to reopen

[linolazar]

have we got any fix for this issue ?

[StoneCypher]

@linolazar - yes, I posted it already, it's --esModuleInterop