jest: babel-jest does not transpile import/export in node_modules when Babel 7 is used
š Bug Report
I started getting the dreaded SyntaxError: Unexpected token import
error again for lodash-es
. And I spent hours debugging it, because I already had .babelrc and package.json:jest configured properly ("modules": "commonjs"
, a jest.transform
for babel-jest
, and transformIgnorePatterns
set to not ignore node_modules/lodash-es
).
After a lot of debugging and a little searching, it appears that Babel 7 has stopped using the projectās .babelrc
code in node_modules
. This means that all the previous suggestions to just tell transformIgnorePatterns
to transpile certain packages in node_modules and set "modules": "commonjs"
in the test env to make WebPack import
work with jest no longer work.
To Reproduce
Steps to reproduce the behavior:
- Import an es-modules using library like
lodash-es
into your project - Write a Jest test that imports the file you import the es-modules using package
- Setup a recent version of Babel 7
- Configure .babelrc to use the env preset to transpile ES6 modules to CommonJS
- Configure Jest to transform .js files with
babel-jest
andtransformIgnorePatterns
to not ignore the es-modules using package
Expected behavior
When babel-jest is used to transpile ES-modules using packages like lodash-es it should transpile the imports to CommonJS so they work with Jest.
Practically I believe it should be sufficient to add transform-modules-commonjs
to the plugins list that babel-jest
uses when the filename is a node_modules
file and Babel 7 is used. This would also fix the fact that itās not good practice for the projectās .babelrc
(which may also include plugins for non-standard things like JSX and flow) to be used just to transpile ES6 / modules code in packages.
Link to repl or repo (highly encouraged)
https://gist.github.com/dantman/820f6232acc6f53bd1e57d21b09e1f89
Run npx envinfo --preset jest
Paste the results here:
System:
OS: macOS Sierra 10.12.6
CPU: x64 Intel(R) Core(TM) i5-7267U CPU @ 3.10GHz
Binaries:
Node: 9.11.1 - ~/.nvm/versions/node/v9.11.1/bin/node
Yarn: 1.6.0 - /usr/local/bin/yarn
npm: 5.6.0 - ~/.nvm/versions/node/v9.11.1/bin/npm
npmPackages:
jest: ^22.4.4 => 22.4.4
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Reactions: 136
- Comments: 58 (6 by maintainers)
Commits related to this issue
- build(npm): downgrade babel https://github.com/facebook/jest/issues/6229 — committed to qiwi/uniconfig by antongolub 6 years ago
- fix(test): enable babel-jest to transform JSX (#2) babel-jest requires babel config to be stored in .js file to transform JSX expressions via @babel/preset-react. See https://github.com/facebook/jest... — committed to artkravchenko/production-react-boilerplate by artkravchenko 6 years ago
- Fix tests using the idea of @lukejagodzinski from https://github.com/facebook/jest/issues/6229 — committed to krassowski/jupyterlab-go-to-definition by krassowski 5 years ago
- CONVERSION to CommonJS - since JEST doesn't like imports and exports in node_modules - https://github.com/facebook/jest/issues/6229 — committed to generalui/hooks-for-redux by shanebdavis 5 years ago
- Convert babel config to a different babel config This is needed because of https://github.com/facebook/jest/issues/6229 — committed to matrix-org/matrix-react-sdk by turt2live 4 years ago
- Fix transpilation of @elg/speedscope in tests See https://github.com/facebook/jest/issues/6229#issuecomment-403539460 — committed to MLH-Fellowship/scheduling-profiler-prototype by taneliang 4 years ago
- #3 fix unit-test Reference this issue: https://github.com/facebook/jest/issues/6229 — committed to pbson/esn-dav-import-client by deleted user 4 years ago
For the record, I was able to fix the issue of my module in the
node_modules
folder not compiling properly by:.babelrc
tobabel.config.js
andmodule.exports
the config objecttransformIgnorePatterns
to my Jest config:Renaming .babelrc to babel.config.js worked for me
I had the same issue and I found this comment. So you should rename the
.babelrc
file tobabel.config.js
which will export.babelrc
object.This didnāt work for me until I added the
env.test
key tobabel.config.js
. Iām not using any transform anything.I love Jest. I love Babel. But installing this suuuuucks. And all the docs are out of date.
@master-7 , i had similar problem, my advice to u is the followings:
See https://github.com/facebook/jest/issues/6053#issuecomment-383632515, it explains the need for
babel.config.js
. I donāt think Jest should do anything special here, open to being convinced otherwise, though.package.json
Versions:
/internals/jest/settings.js
Could you please help?
this happend to me when i updated a react-native project to 0.56.0. Since then, jest test canāt be run anymore.
transformIgnorePatterns
seems to be completly ignored.Seems like
jest-babel
just doesnāt loadbabel.config.js
. Updating previously proposed solution:tests/transform.js
path:jest.config.js
file:babel.config.js
:NOTE:
ts-jest
is not needed with new@babel/preset-typescript
Any updates on this? This is behaviour which was working before and is now not, which seems to be to be a clear regression. Fair enough if the behaviour is to be removed, but lacking any clear documentation indicating that, this just feels like a bug.
The error handling for this issue needs to be updated with a direct link to the solution unless a fix is going to be implemented as itās quite absurd how obscure and nonsensical this issue is still ongoing in 2020. On second thought, if you consider itās 2020 itās quite the norm. Good day
Also worked with setting negate regex in
transformIgnorePatterns
and creating custom babel transformer file:transform.js:
It was frustrating to deal with. When Iāve started using the
lodash-es
package, suddenly it started complaining. Iāve solved this issue with the help of this thread. However, I see that it lacks one universal, well explained solution, so I will try to provide one. Hope it will help others.So it appears that @eugeneoshepkovās solution is the best one but there are some changes that Iāve done to make it work.
tests/transform.js
path:jest.config.js
file:Hope, it will help.
I have a problem on Mac also. When I updated node modules cannot run tests anymore. It fails to transpile from node_modules package even tough I set transformIgnorePatterns (did not change them since it worked).
faced the same issue, followed this steps to resolve
Although I added
@babel/plugin-transform-modules-commonjs
plugin, I was gettingSyntaxError: Unexpected identifier
onimports
. For me, it was happening because I added all babel configuration in a.babelrc
file, but thereās a new concept of configuration inbabel 7
, babel.config.js.So, I added all the configuration in an object on
babel.config.js
file and exported the object.It worked.
Solution found. I fought with this same issue for a couple of days.
I found the solution. When I updated the package.json babel-jest the project broke. Changing babel-jest back to an earlier version, removing node modules, install and the project REMAINS BROKEN.
To reproduce. Put
"babel-jest": "^23.6.0",
into your devDependencies. Verify unit tests work. Upgrade to ābabel-jestā: ā^24.8.0ā, the unit tests will fail. Revert to 23.6.0 and remove all node_modules, npm install, run the unit tests and they continue to fail.To fix
rm -rf node_modules
rm package-lock.json
Without step 3 the tests will continue to fail with the same error.
in babelrc, if you set the env of presets as [ā@babel/preset-envā,{modules: false}], the import would not work. so let the modules of env not be false would solve this problem.
Thanks @austinkelleher
We had something similar but a bit different,
your fix didnāt work first - but then we realized that we were missing the
.+\\.js$
at the end of the line, which worked just fine with jest and babel 6 but doesnāt with babel 7.Iāve got the same issue as @marcelerz. Ever since updating to React Native 56.0,
transformIgnorePatterns
seems to be ignored.Thanks for the suggestion @mpospelov. Unfortunately, it didnāt seem to work for me.
SimenB, that solution is not working for vue-cli.
https://github.com/vuejs/vue-cli/issues/1584
We donāt have .babelrc, or .babel.config.js. I tried creating a basic one, it didnāt work.
Thanks a lot to everyone who tried to help!
@Chethannp @ghasemikasra39, I have an advice to resolve this problem. Please, donāt try to use every babel plugin to solve your problem, thisās not a good deal.
Minimal config to make your transformation works as well
First step is to install the dependencies
Second step - RTFM and follow the configs bellow
babel.config.js
jest.config.js
good luck!
Same issue š¦
same issue? any solution ?
For those who had been struggling like me, listen to this man @SimenB here!
Before you try anything else, copy your babel config and jest config into separate
babel.config.js
andjest.config.js
. This may save you from several hours, maybe days of googling, debugging and frustration.Iāve been trying these ways:
It turns out that none of the above is necessary.
Here is a glimpse of those key configuration files:
package.json
Pay attention that Iām using Babel@7 and jest@23. Babel@7 barely requires any configuration.
babel.config.js
NOTHING fancy at all. Doesnāt even have to explicitly set configs for
test
environment.jest.config.js
Most of the content is copied from
"jest": {...}
in package.json. This is aeject
ed create-react-app project(with TypeScript), so most of the configs below were generated automatically while āejectingā. Iāve add comments to the lines which need to be noticed.Hope this is helpful.
Iām not sure why, but this worked.
Iāve done everything I could for solving this, and still no luck.
I totally agree with @AndrewRayCode about the outdated docs, the one in jestjs.io itās different from the instructions given here in Github. In particular:
Is it necessary to install the bridge to babel 7 or not?
This was all I needed to fix the issue:
@nickovchinnikov is right. Simpler is better.
Man I spent countless hours trying to figure out why
transformIgnorePatterns
wasnāt working, and this was the cause all along? That I wasnāt explicitly usingbabel.config.js
? I understand why, but dang. I was using"babel":
inpackage.js
.Maybe the error thatās displayed below when thereās an unexpected token should explicitly state that it only works with
babel.config.js
?We use
@babel/core
to load the config using https://babeljs.io/docs/en/babel-core#loadpartialconfig. If babel doesnāt find your config, thatās not an issue with jest.Because thatās how Babel works: https://babeljs.io/docs/en/configuration#what-s-your-use-case. You need
babel.config.js
to transpile fromnode_modules
.I donāt think Jest should add babel transforms, beyond the ones it needs for its own purposes.
That said, Jest should load your babel config itself, so weird that it doesnāt workā¦
I ran into a similar error when trying to import a package from node_modules whose index.js is an ES Module. After a lot of painful debugging, I was able to resolve it by moving my babel configuration out of
package.json
, intobabel.config.js
, as described here: https://github.com/facebook/jest/issues/6053#issuecomment-383632515 Combined with a customtransformIgnorePatterns
(see here), this allowed babel-jest to correctly transform the file in node_modules.@sormy: Your note about
ts-jest
vs@babel/preset-typescript
caught my attention. While@babel/preset-typescript
actually can be used instead ofts-jest
,ts-jest
offers some advantages. See e.g. here.Oh, youāre correct, I confused it with the merge done by the
createTransformer
factory.This seems more like a Babel issue rather than Jest, though. Is there an issue over there about it, and discussing the use case of transpiling
node_modules
?I was mistaken. After clearing the cache, I realize you donāt need the custom transform. All jest seems to want is the transformIgnorePatterns to be correct, and to have the babel.config.js in the ROOT directory. Seems like it needs to be updated to respect package.json babel config, as this is a valid location according to babel.