babel@7 and jest configuration

I believe I have found a working solution (no thanks to the Jest team providing broken documentation and evading GitHub issues around this issue).

You need the following in your devDependencies section of your package.json:

  "devDependencies": {
    "@babel/core": "^7.0.0-beta.54",
    "@babel/preset-env": "^7.0.0-beta.54",
    "babel-core": "^7.0.0-bridge.0",
    "babel-jest": "^23.4.0",
    "bili": "^3.1.2",
    "jest": "^23.4.1",
    "regenerator-runtime": "^0.12.0"
  }

The following in your .babelrc:

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "debug": false,
                "targets": {
                    "browsers": [
                        "last 3 versions"
                    ]
                }
            }
        ]
    ]
}

In my particular project I did not need to use the Jest config so I deleted my empty jest.config.js file.

Key points:

  • Remove babel-7-jest as this is deprecated as there is now official support for it.
  • Make sure to only use @babel/xyz packages going forward - the babel-core bridge one I have installed is the "official" way to use latest Babel 7. I imagine this need will be removed at some point in the future as everything migrates to Babel 7.
  • You can now use ES6+ features including import/export and no longer need the antiquated require().

Edit:

If you want to have a more detailed log of passing/failing tests then put this in your jest.config.js:

module.exports = {
    "verbose": true   
}

You can find a working example and tutorial over here.

These are all my Babel packages:

"@babel/core": "^7.1.2",
"@babel/node": "^7.0.0",
"@babel/preset-env": "^7.1.0",
"@babel/preset-react": "^7.0.0",
"@babel/register": "^7.0.0",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^23.6.0",
"babel-loader": "^8.0.4"

And I had to install babel-core@^7.0.0-bridge.0 like it is mentioned on the Jest website.

My .babelrc:

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

And my npm script: jest --config ./test/jest.config.json It didn't change for the Babel 7 upgrade.


4 days ago Facebook added babel 7 support for jest, so no need use the babel 7 bridge anymore.

For more information: https://github.com/facebook/jest/blob/master/README.md#using-babel