babel@7 and jest configuration

Question

Maybe you may help me? I try to configure jest to use babel@7 So I have:

"jest": "^23.4.1",
"@babel/core": "^7.0.0-beta.54",
"babel-7-jest": "^21.3.3",
"babel-jest": "^20.0.3",

And jest config inside package.json

"jest": {
    "transform": {
      "^.+\\.js$": "babel-7-jest",
    },

And got

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string

But if I use

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

I got

Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure you have a compatible version of @babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn't mention "@babel/core" or "babel-core" to see what is calling Babel.

babel config: https://gist.github.com/SilentImp/1506e9c26d16d9839a4469c6f3ae5c4d

Maybe you have some ideas?

I also get this. There are a growing number of open GitHub issues surrounding this issue and the Jest team are being defensive and avoiding providing working solutions to fix this. — user9993, Jul 21 '18 at 12:19
See my answer, I've solved it for my project. Hopefully it works for you too! — user9993, Jul 21 '18 at 12:36

user9993 · Accepted Answer · 2018-07-21T12:40:24.747

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   
}

I try to do it, but now getting `TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string`: https://github.com/FrontenderMagazineDevelopment/mercury-sdk/tree/feature/ISSUE-1/updateBabel — SilentImp, Jul 21 '18 at 13:23
I have removed packages: babel-jest jest-cli jest-enzyme regenerator-runtime AND IT START WORK! Yahoooo! — SilentImp, Jul 21 '18 at 15:24
Note that it got fixed in Jest `24.0.0` so no need for `"babel-core": "^7.0.0-bridge.0"` or anything like that now (see https://jestjs.io/docs/en/getting-started#using-babel) — Arnaud Valle, Feb 26 '19 at 13:59

Robin Wieruch · Answer 2 · 2018-12-21T04:33:41.207

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.

Idan Gozlan · Answer 3 · 2019-01-29T04:35:27.493

4

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

edited Jan 29 '19 at 04:35

answered Jan 29 '19 at 03:46

Idan Gozlan

3,173
3
30
47

Alan Richards · Answer 4 · 2019-10-05T16:35:28.730

I have struggled with this issue for a few days with no luck until seeing this post. Thanks so much for everyone posting whats worked from them!

Here is my configuration for clarity. This is a VueJs application using Jest. Hope this helps someone :)

My npm script for tests

"test:unit": "jest --config ./jest.config.js"

My babel packages

    "@babel/core": "^7.6.2",
    "babel-loader": "^8.0.4",
    "babel-core": "^7.0.0-bridge.0",
    "@babel/preset-env": "^7.6.2",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^23.6.0",
    "@vue/cli-plugin-babel": "^3.11.0",

babel.config.js

module.exports = {
    presets: [
        [
            '@babel/preset-env',
            {
                debug: false,
                targets: {
                    browsers: ['last 3 versions'],
                },
            },
        ],
    ],
};

jest.confg.js

module.exports = {
    verbose: true,
    moduleFileExtensions: ['js', 'json', 'vue'],
    moduleNameMapper: {
        '^@/(.*)$': '<rootDir>/src/$1',
    },
    transform: {
        '^.+\\.vue$': 'vue-jest',
        '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
        '^.+\\.(js|jsx)?$': 'babel-jest',
    },
    transformIgnorePatterns: ['<rootDir>/node_modules/'],
    testMatch: ['**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'],
    collectCoverage: false,
    collectCoverageFrom: ['src/components/*.{js,vue}', '!**/node_modules/**'],
    coverageReporters: ['html', 'text-summary'],
};

babel@7 and jest configuration

4 Answers4

Linked