Vue-Jest (Jest Unit Test) : SyntaxError : Cannot use import statement outside a module

Question

I am new to Vue Unit Testing and i keep getting the same Error after trying my first test.It seems to work for the first 2 import statements , but not for the epis-spinners one .I tried everything and looked up a lot over the forums and Github , but i couldnt find a solution. everything i try doesnt seem to work. I need help please !

Thanks :)

Error

 PASS  test/jesttest.spec.js (5.243s)
  ● Console

    console.log test/jesttest.spec.js:18
      red

 FAIL  test/ExitUserCompany.spec.js
  ● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    C:\9raya\anforderungsportal\anforderungsportal\frontend\node_modules\epic-spinners\src\lib.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import HollowDotsSpinner from './components/lib/HollowDotsSpinner.vue';
                                                                                             ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      73 | import {CompanyService} from "@/common/api/company.service";
      74 | import {AssetDBDataService} from "@/common/api/assetDBData.service";
    > 75 | import { SelfBuildingSquareSpinner } from 'epic-spinners'
         | ^
      76 | 
      77 |   moment.locale('de');
      78 | 

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1059:14)
      at src/layouts/MainLayout.vue:75:1
      at Object.<anonymous> (src/layouts/MainLayout.vue:290:3)

Test Suites: 1 failed, 1 passed, 2 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        22.188s

package.json (with Jest config)

{
  "scripts": {
    "serve": "vue-cli-service serve --host localhost",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test": "jest"
  },
  "dependencies": {
    "@babel/polyfill": "^7.2.5",
    "@babel/runtime": "^7.3.1",
    "axios": "^0.18.0",
    "bulma": "^0.7.5",
    "deep-object-diff": "^1.1.0",
    "epic-spinners": "^1.1.0",
    "etcdjs": "^2.4.2",
    "etcdjs-promise": "^1.0.0",
    "js-base64": "^2.5.1",
    "js-file-download": "^0.4.9",
    "keycloak-js": "^4.0.0",
    "luxon": "^1.17.1",
    "moment": "^2.24.0",
    "register-service-worker": "^1.5.2",
    "url-loader": "^1.0.1",
    "vee-validate": "^2.2.12",
    "vue": "2.6.5",
    "vue-axios": "^2.1.4",
    "vue-cookies": "^1.6.1",
    "vue-datetime": "^1.0.0-beta.10",
    "vue-router": "^3.0.1",
    "vue-select": "^3.1.0",
    "vuedraggable": "^2.23.0",
    "vuex": "^3.1.0",
    "vuex-router-sync": "^5.0.0"
  },
  "devDependencies": {
    "@babel/plugin-transform-runtime": "^7.2.0",
    "@vue/cli-plugin-babel": "^3.3.0",
    "@vue/cli-plugin-eslint": "^3.3.0",
    "@vue/cli-plugin-pwa": "^3.3.0",
    "@vue/cli-service": "^3.3.0",
    "@vue/test-utils": "^1.0.0-beta.31",
    "ant-design-vue": "^1.4.5",
    "babel-core": "^7.0.0-bridge.0",
    "babel-jest": "^25.1.0",
    "babel-plugin-import": "^1.11.0",
    "jest": "^25.1.0",
    "jest-transform-stub": "^2.0.0",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "vue-jest": "^3.0.5",
    "vue-template-compiler": "2.6.5"
  },
  "jest": {
    "moduleFileExtensions": [
      "js",
      "json",
      "vue",
      "ts"
    ],
    "moduleNameMapper": {
      "^@/(.*)$": "<rootDir>/src/$1",
      "^.+.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub"
    },
    "transform": {
      ".*\\.(vue)$": "vue-jest",
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
      ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub"
    },
    "modulePaths": [
      "<rootDir>/src",
      "<rootDir>/node_modules"
  ],
  "transformIgnorePatterns": ["/node_modules/(?!epic-spinners)/"]
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

.babelrc

{
    "env": {
      "test": {
        "presets": [["@babel/env", { "targets": { "node": "current" } }]]
      }
    }
  }

babel.config.js

module.exports = {
  plugins: [
    [
      "import",
      { libraryName: "ant-design-vue", libraryDirectory: "es", style: true }
    ],
    "@babel/plugin-syntax-dynamic-import"
  ]
}

Answer 1

Would you try the below?

install npm modules

npm i -D @vue/babel-preset-app

babel.config.js

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