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\         


        

Answer 1

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: {
        '^@/(.*)$': '/src/$1',
    },
    transform: {
        '^.+\\.vue$': 'vue-jest',
        '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
        '^.+\\.(js|jsx)?$': 'babel-jest',
    },
    transformIgnorePatterns: ['/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'],
};