Rails Vue2 Jest SyntaxError: Cannot use import statement outside a module - vue.js

Question

I have a Rails application with Vue and when I installed Jest and tried to run my Menu_Filter.test.js test, I got this error. I tried many solutions, but nothing worked.
Error:
My package.json in which I configured Jest:
{
"name": "immomapper-frontend",
"version": "0.1.0",
"dependencies": {
"#rails/actioncable": "^6.0.0",
"#rails/activestorage": "^6.0.0",
"#rails/ujs": "^6.0.0",
"#rails/webpacker": "5.4.3",
"#vue/composition-api": "^1.2.4",
"#vueform/multiselect": "^2.2.0",
"#vueform/slider": "^2.0.5",
"babel": "^6.23.0",
"babel-jest": "^27.2.5",
"jest": "^27.2.5",
"leaflet": "^1.7.1",
"turbolinks": "^5.2.0",
"vue": "^2.6.14",
"vue-loader": "^15.9.8",
"vue-template-compiler": "^2.6.14",
"vue2-leaflet": "^2.7.1",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12"
},
"devDependencies": {
"#babel/core": "^7.15.8",
"#babel/preset-env": "^7.15.8",
"#vue/babel-preset-app": "^4.5.14",
"#vue/cli-plugin-unit-jest": "~4.5.0",
"#vue/test-utils": "^1.2.2",
"babel-core": "^7.0.0-bridge.0",
"vue-jest": "^3.0.7",
"webpack-dev-server": "^3"
},
"scripts": {
"test": "jest"
},
"jest": {
"roots": [
"app/javascript/spec"
],
"moduleFileExtensions": [
"js",
"json",
"vue"
],
"moduleNameMapper": {
"^#/(.*)$'": "<rootDir>/src/$1"
},
"transform": {
"^.+\\.js$": "babel-jest",
"^.+\\.vue$": "vue-jest"
},
"testEnvironment": "jsdom"
}
}
My test file:
import { mount, shallowMount } from '#vue/test-utils'
import Filter from '../components/Menu_filter'
test('Filter exists', () => {
const wrapper = mount(Filter);
expect(wrapper.is(Filter)).toBe(true)
})
Lastly, my babel.config.js:
module.exports = function(api) {
var validEnv = ['development', 'test', 'production']
var currentEnv = api.env()
var isDevelopmentEnv = api.env('development')
var isProductionEnv = api.env('production')
var isTestEnv = api.env('test')
if (!validEnv.includes(currentEnv)) {
throw new Error(
'Please specify a valid `NODE_ENV` or ' +
'`BABEL_ENV` environment variables. Valid values are "development", ' +
'"test", and "production". Instead, received: ' +
JSON.stringify(currentEnv) +
'.'
)
}
return {
presets: [
isTestEnv && [
'#babel/preset-env',
{
targets: {
node: 'current'
}
}
],
(isProductionEnv || isDevelopmentEnv) && [
'#babel/preset-env',
{
forceAllTransforms: true,
useBuiltIns: 'entry',
corejs: 3,
modules: auto,
exclude: ['transform-typeof-symbol']
}
]
].filter(Boolean),
plugins: [
'babel-plugin-macros',
'#babel/plugin-syntax-dynamic-import',
isTestEnv && 'babel-plugin-dynamic-import-node',
'#babel/plugin-transform-destructuring',
[
'#babel/plugin-proposal-class-properties',
{
loose: true
}
],
[
'#babel/plugin-proposal-object-rest-spread',
{
useBuiltIns: true
}
],
[
'#babel/plugin-proposal-private-methods',
{
loose: true
}
],
[
'#babel/plugin-proposal-private-property-in-object',
{
loose: true
}
],
[
'#babel/plugin-transform-runtime',
{
helpers: false
}
],
[
'#babel/plugin-transform-regenerator',
{
async: false
}
]
].filter(Boolean)
}
}
I don't use Typescript, I did add the yarn add babel-core#bridge --dev, I used transform, I also tried to change the jest version to 26.x.x, I added type="module" to my vue component... I don't know what the problem is.