I am trying to migrate a Vue 2 Project that is running in Laravel and Blade to Vue 3, but I cant get my Jest-test configuration to work

Question

I am trying to migrate a Vue 2 Project that is running in Laravel and Blade to Vue 3, but I cant get my Jest-test configuration to work.

I have migrated most of the components that are still needed in the project and updated or replace external packages to work with Vue 3.

Now i am struggling to get my testing configuration to work properly.

Simple tests are passing, however as soon as the test or the component is using some external package or "import" / "export" syntax it says:

"SyntaxError: Unexpected token 'export'"

"SyntaxError: Cannot use import statement outside a module"

As I am quite new to the project the configuration is not my speciality.... The Project is a Laravel Project using Blade in the frontend with Vue. Also Laravel-mix, Webpack and babel are used in the project.

Most of the guys who did the config, are not in the project anymore and I don´t know what else i need to change to make this testing config work with Vue 3 so I can start adjusting the test syntax to Vue 3.

I tried to update the different packages "vue/test-utils", "vue3-jest",... and adjust the configuration to the best of my abilities, however i cant get it to accept ESM syntax.

This is part of the current package.json:

{
  "@babel/preset-env": "7.15.6",
  "@vue/test-utils": "^2.4.1",
  "babel-jest": "27.5.1",
  "babel-polyfill": "6.26.0",
  "expect": "27.5.1",
  "html-loader-jest": "0.2.1",
  "jest": "^27.5.1",
  "moxios": "0.4.0",
  "vue3-jest": "^27.0.0-alpha.1",
  "@popperjs/core": "^2.11.8",
  "@vue/compiler-sfc": "3.3.4",
  "@vueuse/core": "^10.3.0",
  "aws-amplify": "4.3.39",
  "axios": "0.21.1",
  "bootstrap": "^5.3.0",
  "cross-env": "3.2.4",
  "cross-spawn": "^7.0.3",
  "dotenv-webpack": "8.0.1",
  "emittery": "^1.0.1",
  "vue": "3.3.4",
  "vue-loader": "17.2.2",
  "webpack": "5.75.0",
}

the current jest.config:

module.exports = {
    rootDir: __dirname,
    transform: {
        ".*\\.(vue)$": "vue3-jest",
        "^.+\\.(js|jsx)?$": "babel-jest",
        "^.+\\.html?$": "html-loader-jest"
    },
    collectCoverageFrom: [
        "<rootDir>/resources/assets/cms/js/components/**/*.{js,vue}",
        "<rootDir>/resources/assets/cms/js/vueRoot.js",
        "<rootDir>/resources/assets/cms/js/notification.js",
        "<rootDir>/resources/assets/cms/js/alerter.js",
        "<rootDir>/resources/assets/frontend/js/components/**/*.{js,vue}",
        "<rootDir>/resources/assets/frontend/js/helpers/**/*.{js,vue}",
        "<rootDir>/app/Components/**/*.{js,vue}",
        "!<rootDir>/**/*.spec.js"
    ],
    moduleFileExtensions: [
        "js",
        "json",
        "vue"
    ],
    testMatch: [
        "<rootDir>/**/*.(test|spec).js"
    ],
    setupFiles: ["dotenv/config"],
    setupFilesAfterEnv: [
        "<rootDir>/resources/assets/cms/js/test/index.js"
    ],
    roots: [
        "<rootDir>"
    ],
    testEnvironment: 'jsdom',
    transformIgnorePatterns: ["/node_modules/(?!vue-multiselect|vuetify|laravel-file-manager|swiper|ssr-window|dom7)"],
    moduleNameMapper: {
        "^.+\\.(css|less|sass)$": "<rootDir>/resources/assets/cms/js/test/CSSStub.js",
        "^vue$": "vue/dist/vue.cjs.js",
        "@scripts(.*)$": "<rootDir>/resources/assets/frontend/js/$1",
        "\\$components(.*)$": "<rootDir>/app/Components/$1",
        "\\$scripts(.*)$": "<rootDir>/resources/assets/frontend/js/$1",
        "\\$JsComponents(.*)$": "<rootDir>/resources/assets/frontend/js/components/$1",
        "@cmsScripts(.*)$": "<rootDir>/resources/assets/cms/js/$1",
        "@styles(.*)$": "<rootDir>/resources/assets/frontend/less/$1",
        "@cmsStyles(.*)$": "<rootDir>/resources/assets/cms/less/$1"
    },
    verbose: true,
    moduleDirectories: [
        "node_modules"
    ],
    bail: true,
    coverageDirectory:  "<rootDir>/public/coverage/js",
    collectCoverage: false,
    coverageReporters: ["lcov", "text", "clover", "html"]
};

and the current babel.config:

module.exports = {
    presets: [
        [
            '@babel/preset-env',
            {
                targets: {
                    node: 'current',
                    browsers: 'last 3 versions and not dead and >0.2%'
                },
            },
        ],
    ],
};

what am I missing, any help is appreciated.