Jest: Imports broken in babel-jest when using babel and @babel/typescript

[japhar81]

Do you want to request a _feature_ or report a _bug_?
Bug

What is the current behavior?
It appears that Jest doesn't play nice with TypeScript that's compiled exclusively via Babel -- e.g. without tsc.

If the current behavior is a bug, please provide the steps to reproduce and
either a repl.it demo through https://repl.it/languages/jest or a minimal
repository on GitHub that we can yarn install and yarn test.

I've got a minimal repro here: https://github.com/japhar81/JestRepro

3202 indicates that the issue is with {"modules":false}. Indeed, yarn test with that setting yields an error; SyntaxError: Unexpected token import. Removing that setting (as in the repro code), yields a different error TypeError: (0 , express) is not a function.

Digging further lead me to this issue: https://github.com/Microsoft/TypeScript/issues/5458 -- and I can confirm that if I change my import to be import express from 'express', things work, though of course TypeScript is angry as there's no real default export in the express definition.

https://github.com/facebook/jest/issues/3202#issuecomment-318260688 references using

"plugins": [
        "transform-es2015-modules-commonjs",
        "dynamic-import-node"
      ]

Adding those in this same repo has no effect. The error remains TypeError: express is not a function. It's possible these are no longer valid for Babel 7 and different plugins should be used -- I've had no luck identifying if that's the case.

What is the expected behavior?
There should be some way to keep TypeScript happy with import * as express from 'express' and still have Jest operate. As yarn start demonstrates in this sample, it does compile and work with {"modules":false} in webpack. I'm not entirely sure where the difference is, but presumably if Webpack can do it, Jest can as well.

Please provide your exact Jest configuration and mention your Jest, node,
yarn/npm version and operating system.
Mac OS X 10.13.3
Yarn: 1.3.2
npm: 5.6.0
node: 9.3.0
Jest: 22.2.2
See Repo for Config

[satya164]

This looks like a bug with how Babel handles import statements, which is different from how typescript compiler does it as linked in the issue.

if Webpack can do it, Jest can as well

Webpack has native support for imports, and looks like the way it handles imports is different from the way Babel handles them.

Jest relies on Babel to transpile imports and doesn't support it natively, so it won't be possible for Jest to do it without a custom transformer which transpiles those import statements AFAIK.

[AndrewSouthpaw]

I believe I'm running into a similar issue, except without TypeScript. Here's a repo demonstrating the issue, it's simplified from the flow-typed repo where I'm encountering this same problem. Works fine with Jest 20, but not on Jest 21/22.

[thymikee]

@AndrewSouthpaw I cannot repro (tried several times to test cache run). This is probably something with your package manager. Try removing node_modules or run yarn --check-files

[subblue]

I had the same problem, but removing the node_modules and reinstalling them fresh fixed it for me.

[AndrewSouthpaw]

yarn --check-files notes an incorrect peer dependency between babel-jest and babel-core...

yarn install v1.0.2
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "[email protected]" has incorrect peer dependency "ajv@^5.0.0".
warning "[email protected]" has incorrect peer dependency "ajv@>=4.9.0".
warning "[email protected]" has incorrect peer dependency "babel-core@^6.0.0 || ^7.0.0-0".
warning "[email protected]" has incorrect peer dependency "request@^2.34".
warning "[email protected]" has incorrect peer dependency "request@^2.34".

Otherwise it's fine. I've tried doing a fresh install of node_modules multiple times now. :-/ Any other ideas?

[thymikee]

https://facebook.github.io/jest/docs/en/getting-started.html#using-babel

[AndrewSouthpaw]

Wow. That was a shockingly simple fix, and strange that flow-typed has made it this far without bumping into it. I wonder why my particular setup caused it to fail...

Either way, thank you so much! This had a couple of us on the flow-typed team stumped!

[thymikee]

😅glad you have this sorted now!

[casey-speer]

It appears that jest won't look for typescript files to compile with babel by default, so in addition to any other typescript-related config in jest, I had to add

"transform": {
    "^.+\\.ts$": "babel-jest"
}

to my jest config in package.json.

Also, I had to npm install @babel/core [email protected] to get it working with babel 7 (needed for babel transpilation of typescript).

[SimenB]

We currently point people to ts-jest for typescript (https://facebook.github.io/jest/docs/en/getting-started.html#using-typescript). I wonder if a quick guide using babel 7 would be good as well. It's _mostly_ good enough (http://artsy.github.io/blog/2017/11/27/Babel-7-and-TypeScript/ has the caveats).

[niekert]

Found this issue trying to add support for .ts imports in Jest with @babel/plugin-transform-typescript. I did not have the unexpected token import but instead jest could not find the import from TS files. Turns out I was missing the ts extensions in my Jest config:

"moduleFileExtensions": ["js", "jsx", "json", "ts", "tsx"]