"SyntaxError: Cannot use import statement outside a module" when running a Jest test with Vue Js

I found an answer on SO from a previous similar question Unexpected token 'import' error while running Jest tests?

Basically I had to change my transformIgnorePatterns array in my jest config from:

transformIgnorePatterns: ["/node_modules/"],

to

transformIgnorePatterns: ["/node_modules/(?!vue-awesome)"],

making sure jest compiles 'vue-awesome' module to use in the test.

What I did was I installed the dependencies needed for vue and jest to work together, then I created a config file for babel and jest.

//Installing dependencies for jest and vue js
npm i -D @vue/test-utils jest vue-jest @vue/babel-preset-app babel-core@^7.0.0-bridge.0

//jest.config.js
module.exports = {
    moduleFileExtensions: ['js', 'jsx', 'json', 'vue'],
    transform: {
        ".*\\.(vue)$": "vue-jest",
        "^.+\\.js$": "<rootDir>/node_modules/babel-jest"
    }
};

//babel.config.js
module.exports = {
    presets: [
        '@vue/app'
    ]
};