Getting import error vuejs + jest + Vuetify - vue.js

Question

I am getting following import error while running unit tests
● Test suite failed to run
/Users/aniruddha/works/awsportal_2/node_modules/vuetify/es5/components/VDivider/VDivider.js:3
import Themeable from '../../mixins/themeable';
^^^^^^
SyntaxError: Unexpected token import
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:305:17)
at Object.<anonymous> (src/components/Account.vue:17:67)
at Object.<anonymous> (test/unit/specs/Account.spec.js:5:16)
Here is debug output
{
"configs": [
{
"automock": false,
"browser": false,
"cache": true,
"cacheDirectory": "/var/folders/7y/_sh8syl163xdy6jfyc7bww8w0000gn/T/jest_dx",
"clearMocks": false,
"coveragePathIgnorePatterns": [
"/node_modules/"
],
"globals": {},
"haste": {
"providesModuleNodeModules": []
},
"moduleDirectories": [
"node_modules",
"/Users/aniruddha/works/awsportal_2"
],
"moduleFileExtensions": [
"js",
"json",
"vue"
],
"moduleNameMapper": [
[
"^#/(.*)$",
"/Users/aniruddha/works/awsportal_2/src/$1"
],
[
"^vue$",
"vue/dist/vue.common.js"
]
],
"modulePathIgnorePatterns": [],
"name": "a49c5965915e40b9abc5a5cfedaeeb54",
"resetMocks": false,
"resetModules": false,
"rootDir": "/Users/aniruddha/works/awsportal_2",
"roots": [
"/Users/aniruddha/works/awsportal_2"
],
"runner": "jest-runner",
"setupFiles": [
"/Users/aniruddha/works/awsportal_2/test/unit/setup.js"
],
"snapshotSerializers": [],
"testEnvironment": "jest-environment-jsdom",
"testMatch": [
"**/__tests__/**/*.js?(x)",
"**/?(*.)(spec|test).js?(x)"
],
"testPathIgnorePatterns": [
"/node_modules/"
],
"testRegex": "",
"testRunner": "/Users/aniruddha/works/awsportal_2/node_modules/jest-jasmine2/build/index.js",
"testURL": "about:blank",
"timers": "real",
"transform": [
[
"^.+\\.js$",
"/Users/aniruddha/works/awsportal_2/node_modules/babel-jest/build/index.js"
],
[
".*\\.(vue)$",
"/Users/aniruddha/works/awsportal_2/node_modules/jest-vue-preprocessor/index.js"
]
],
"transformIgnorePatterns": [
"/node_modules/"
],
"watchPathIgnorePatterns": []
}
],
"globalConfig": {
"bail": false,
"changedFilesWithAncestor": false,
"collectCoverage": true,
"collectCoverageFrom": [
"src/**/*.{js,vue}",
"!src/main.js",
"!src/router/index.js",
"!**/node_modules/**"
],
"coverageDirectory": "/Users/aniruddha/works/awsportal_2/coverage",
"coverageReporters": [
"html"
],
"expand": false,
"listTests": false,
"mapCoverage": true,
"maxWorkers": 3,
"noStackTrace": false,
"nonFlagArgs": [
"test/unit/specs"
],
"notify": false,
"onlyChanged": false,
"rootDir": "/Users/aniruddha/works/awsportal_2",
"runTestsByPath": false,
"testFailureExitCode": 1,
"testPathPattern": "test/unit/specs",
"testResultsProcessor": null,
"updateSnapshot": "new",
"useStderr": false,
"verbose": true,
"watch": false,
"watchman": true
},
"version": "21.2.1"
}
PASS test/unit/specs/ConfigRule.spec.js
ConfigRule.vue
✓ component have title (4ms)
✓ render template correctly (38ms)
FAIL test/unit/specs/Account.spec.js
● Test suite failed to run
/Users/aniruddha/works/awsportal_2/node_modules/vuetify/es5/components/VDivider/VDivider.js:3
import Themeable from '../../mixins/themeable';
^^^^^^
SyntaxError: Unexpected token import
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:305:17)
at Object.<anonymous> (src/components/Account.vue:17:67)
at Object.<anonymous> (test/unit/specs/Account.spec.js:5:16)
Test Suites: 1 failed, 1 passed, 2 total
Tests: 2 passed, 2 total
Snapshots: 0 total
Time: 3.064s
Ran all test suites matching /test\/unit\/specs/i.
=============================== Coverage summary ===============================
Statements : 0.13% ( 1/775 )
Branches : 0% ( 0/277 )
Functions : 0.51% ( 1/198 )
Lines : 0.14% ( 1/706 )
================================================================================
package.json
{
"name": "awsportal_redesigned",
"version": "1.0.0",
"description": "POC",
"author": "Aniruddha Gaikwad <anieruddhad#gmail.com>",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"test": "jest test/unit/specs --coverage",
"lint": "eslint --ext .vue src test/unit/specs",
"build": "node build/build.js"
},
"dependencies": {
"vue": "^2.5.3",
"vue-router": "^3.0.1",
"vue-session": "^0.9.10",
"vuelidate": "^0.6.1",
"vuetify": "^0.17.4",
"vuex": "^3.0.1"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.26.0",
"babel-eslint": "^7.1.1",
"babel-jest": "^21.2.0",
"babel-loader": "^7.1.1",
"babel-plugin-add-filehash": "^6.9.4",
"babel-plugin-dynamic-import-node": "^1.2.0",
"babel-plugin-module-resolver": "^3.0.0",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-system-import-transformer": "^3.1.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"eslint": "^3.19.0",
"eslint-config-airbnb-base": "^11.3.0",
"eslint-friendly-formatter": "^3.0.0",
"eslint-import-resolver-webpack": "^0.8.3",
"eslint-loader": "^1.7.1",
"eslint-plugin-html": "^3.0.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-vue": "^4.0.0",
"eventsource-polyfill": "^0.9.6",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"jest": "^21.2.0",
"jest-babel-preprocessor": "^0.3.0",
"jest-cli": "^22.0.4",
"jest-vue-preprocessor": "^1.3.1",
"jsdom": "^11.5.1",
"node-notifier": "^5.1.2",
"node-sass": "^4.7.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"rimraf": "^2.6.0",
"sass-loader": "^6.0.6",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.1",
"url-loader": "^0.5.8",
"vue-jest": "^1.0.2",
"vue-loader": "^13.3.0",
"vue-server-renderer": "^2.5.13",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.3",
"vue-test-utils": "^1.0.0-beta.9",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"jest": {
"verbose": true,
"moduleDirectories": [
"node_modules",
"<rootDir>/"
],
"moduleFileExtensions": [
"js",
"json",
"vue"
],
"moduleNameMapper": {
"^#/(.*)$": "<rootDir>/src/$1",
"^vue$": "vue/dist/vue.common.js"
},
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
".*\\.(vue)$": "<rootDir>/node_modules/jest-vue-preprocessor",
".*": "<rootDir>/node_modules/babel-jest"
},
"setupFiles": [
"<rootDir>/test/unit/setup"
],
"mapCoverage": true,
"collectCoverageFrom": [
"src/**/*.{js,vue}",
"!src/main.js",
"!src/router/index.js",
"!**/node_modules/**"
],
"collectCoverage": true,
"coverageReporters": [
"html"
],
"coverageDirectory": "./coverage",
"unmockedModulePathPatterns": [
"<rootDir>/node_modules/react"
]
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}

Answer 1

problem was with babel configuration. After going through different posts, following configuration in .babelrc works for me
{
"presets": [
["env", {"modules": false}],
["stage-2"]
],
"env": {
"test": {
"presets": [
["env", { "targets": { "node": "current" }}]
]
}
}
}