Jest: babel-jest fails on dynamic babel.config.js due to old "babel-core" dependency

[jahed]

🐛 Bug Report

Babel 7 added support for dynamic configuration, however, because babel-jest is dependant on babel-core, it's using the wrong version of babel for loading options and running transformations. Babel 7 uses @babel/core@^7.0.0 which is an entirely different module.

As such, it doesn't load the user's @babel/core but instead loads the one provided by jest-config transiently which does not pick up the new babel.config.js format introduced in 7.

Dynamic Configuration Docs

To Reproduce

Run jest using babel-jest in a project with:

• Babel 7 (release, which uses scoped packages)
• A dynamic babel.config.js (i.e. a module which resolves to a function which returns the babel options).
• A tested module using syntax that isn't supported in NodeJS (like ES6 imports)

It will error.

Test output

 FAIL  packages/css/src/escapeCssUrl.test.js
  ● Test suite failed to run

    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

    Details:

    [redacted]\packages\css\src\escapeCssUrl.test.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import escapeCssUrl from './escapeCssUrl';
                                                                                             ^^^^^^

    SyntaxError: Unexpected token import

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)

Expected behavior

I expected jest to run tests using the dynamic babel configuration without issue.

Link to repl or repo (highly encouraged)

I can try setting one up if needed.

Run npx envinfo --preset jest

Paste the results here:

Environment:
  OS: Windows 10
  Node: 8.11.1
  Yarn: 1.9.4
  npm: 5.6.0
  Watchman: Not Found
  Xcode: N/A
  Android Studio: Not Found

[jahed]

I'd assume the fix here is to drop babel-core support and move over to @babel/core. I've done this in a fork, but I can't run tests on my machine (well, I can but there are various errors even without my own changes).

The diff for my changes can be seen here for anyone interested. I also changed the caching logic to use loadOptions since resolving the dynamic config is a bit tricky without it. However, it'll likely have performance issues.

https://github.com/jahed/jest/compare/master...jahed:feat%2Fbabel-7-options?diff=unified&name=feat%2Fbabel-7-options

[jasonbellamy]

I'm having the same issue where babel-jest just started failing with with the babel 7 release.

  - Test suite failed to run

    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

    Details:

[mweibel]

I have the same issue and found an ugly workaround for now:

// FIXME: remove once babel-jest supports babel.config.js
module.exports = require('./babel.config')({
  cache: () => {},
  env: () => process.env.NODE_ENV
})

Put this into .babelrc.js and remove .babelrc.

👍 on adding support for @babel/core 7

[SimenB]

Closing as duplicate of #6913, but feel free to chime in there with your reproduction case.