Unexpected identifier with jest + vuejs + vuetify - vue.js

Question

I've searched high and low for an answer. I suspect that it is a .babelrc issue, but I can't find an answer that works.
The app runs just fine, but as I found out, both Jest and Rollup really depend on .babelrc. The other possible culprit is Leaflet. Of all the components that I build and test, only the one containing Leaflet and vue2-leaflet seem to have this problem. Considering I'm working on a mapping app, this is critical for me.
I'm posting here, because I can't prove anything. And there are a number of other folks that have seen similar problems.
Terminal Output:
nr test:unit
> cxl-vue-leaflet#3.0.1-SNAPSHOT test:unit /Users/dan.mahoney/Projects/cxl-vue-leaflet
> NODE_ENV=testing BABEL_DISABLE_CACHE=1 jest --verbose --no-cache
Determining test suites to run...
# Starting...
# 1 test suites found.
# FAIL src/components/__test__/specs/cxl-vue-leaflet.spec.js
#
# /Users/dan.mahoney/Projects/cxl-vue-leaflet/node_modules/vuetify/lib/index.js:1
#
# ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import Vuetify from './components/Vuetify';
# ^^^^^^^
#
# SyntaxError: Unexpected identifier
#
# Stack:
#
# at new Script (vm.js:85:7)
1..0
# Test Suites: 0% , 1 failed, 1 total
# Tests: 0 total
# Time: 2.088s
# Ran all test suites.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! cxl-vue-leaflet#3.0.1-SNAPSHOT test:unit: `NODE_ENV=testing BABEL_DISABLE_CACHE=1 jest --verbose --no-cache`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the cxl-vue-leaflet#3.0.1-SNAPSHOT test:unit script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/dan.mahoney/.npm/_logs/2019-03-08T21_06_53_748Z-debug.log
.babelrc:
{
"sourceMaps": true,
"presets": [
[
"#babel/preset-env",
]
],
"env": {
"test": {
"presets": [
[
"env",
{
"targets": {
"node": "current"
}
}
]
]
}
},
"plugins": [
"transform-es2015-modules-commonjs",
["add-module-exports", {
"vuetify": {
"transform": "vuetify/es5/components/${member}",
"preventFullImport": "false"
},
}],
]
}
Jest config in package.json:
"jest": {
"transformIgnorePatterns": [
"<rootDir>/node_modules/"
],
"moduleFileExtensions": [
"js",
"vue"
],
"moduleNameMapper": {
"^#/(.*)$": "<rootDir>/src/$1",
"^.+\\.(css)$": "identity-obj-proxy"
},
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
"^.+\\.vue$": "vue-jest",
".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub"
},
"reporters": [
"jest-tap-reporter"
],
"collectCoverageFrom": [
"**/components/*.vue",
"!**/node_modules/**"
]
},
Dependencies:
"dependencies": {
"get-value": "^3.0.1",
"leaflet": "^1.4.0",
"leaflet.icon.glyph": "^0.2.0",
"moment": "^2.23.0",
"vue-moment": "^4.0.0",
"vue2-leaflet": "^2.0.2",
"vue2-leaflet-markercluster": "^3.0.0",
"vuetify": "^1.5.5"
},
"devDependencies": {
"#babel/core": "^7.3.4",
"#babel/plugin-proposal-object-rest-spread": "^7.3.4",
"#babel/plugin-transform-runtime": "^7.3.4",
"#babel/preset-env": "^7.3.4",
"#vue/cli-service": "^3.5.0",
"#vue/test-utils": "^1.0.0-beta.28",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^24.3.1",
"babel-plugin-add-module-exports": "^1.0.0",
"babel-plugin-external-helpers": "^6.22.0",
"babel-plugin-source-map-support": "^2.0.1",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
"babel-plugin-transform-imports": "^1.4.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"chromedriver": "^2.38.3",
"eslint": "^5.15.1",
"eslint-config-airbnb-base": "^13.1.0",
"eslint-config-standard": "^12.0.0",
"eslint-config-strict": "^14.0.1",
"eslint-config-strict-es": "^1.0.4",
"eslint-detailed-reporter": "^0.7.3",
"eslint-import-resolver-webpack": "^0.11.0",
"eslint-loader": "^2.1.0",
"eslint-plugin-html": "^5.0.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jest": "^22.1.3",
"eslint-plugin-leon-require-jsdoc": "0.0.1",
"eslint-plugin-node": "^8.0.1",
"eslint-plugin-promise": "^4.0.1",
"eslint-plugin-security": "^1.4.0",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^5.1.0",
"eslint-plugin-vue-a11y": "0.0.28",
"growl": "^1.10.2",
"husky": "^1.3.1",
"identity-obj-proxy": "^3.0.0",
"is-image": "^2.0.0",
"jest": "^24.3.1",
"jest-tap-reporter": "^1.9.0",
"jest-transform-stub": "^2.0.0",
"jest-vue-preprocessor": "^1.5.0",
"jsdoc": "^3.5.5",
"jsdoc-vue": "^1.0.0",
"jsdom": "^13.0.0",
"jsdom-global": "^3.0.2",
"material-design-icons-iconfont": "^4.0.2",
"minimist": "^1.2.0",
"nightwatch": "^1.0.11",
"npm-merge-driver": "^2.3.5",
"parse5": "^5.1.0",
"raf": "^3.4.0",
"require-extension-hooks": "^0.3.2",
"require-extension-hooks-babel": "^0.1.1",
"require-extension-hooks-vue": "^2.0.0",
"rollup": "^1.6.0",
"rollup-plugin-analyzer": "^3.0.0",
"rollup-plugin-babel": "^4.3.0",
"rollup-plugin-babel-minify": "^7.0.0",
"rollup-plugin-commonjs": "^9.1.8",
"rollup-plugin-postcss": "^2.0.1",
"rollup-plugin-replace": "^2.1.0",
"rollup-plugin-vue": "^4.3.2",
"selenium": "^2.20.0",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.1",
"tap-summary": "^4.0.0",
"vue": "^2.6.8",
"vue-jest": "^3.0.4",
"vue-loader": "^15.7.0",
"vue-meta": "^1.5.8",
"vue-template-compiler": "^2.6.8",
"vuepress": "^1.0.0-alpha.42",
"vuepress-jsdoc": "^1.0.3",
"vuetify-loader": "^1.0.8"
},
I'm really at a loss here. Thanks for any help.

Answer 1

By default, Jest doesn't transform anything in node_modules (where vuetify package lives), but you actually need it to run vuetify through the configured babel-jest transform so that the imports could be transpiled. To do that, use this config in jest.config.js:
module.exports = {
transformIgnorePatterns: [
'<rootDir>/node_modules/(?!vuetify)'
],
...
}
A Pull Request was just submitted to document this pitfall.

Answer 2

For anyone still experiencing this with Vue 3/Vuetify 3, the fix for me was similar, but I wasn't using many of the packages in the original question:
Jest config
"jest": {
"preset": "#vue/cli-plugin-unit-jest",
"transform": {
"^.+\\.vue$": "#vue/vue3-jest",
"^.+\\.(js|mjs)$": "babel-jest"
},
"transformIgnorePatterns": ["/node_modules/(?!(vuetify)/)"]
// plus some globals and a module alias
}
Babel config
module.exports = {
presets: [
'#vue/cli-plugin-babel/preset',
],
};
Dependency versions
"dependencies": {
"vue": "^3.2.31",
"vuetify": "^3.0.4",
"#vue/cli-plugin-babel": "^5.0.8",
"#vue/cli-plugin-unit-jest": "~5.0.8",
"#vue/cli-service": "~5.0.1",
"#vue/compiler-sfc": "^3.0.7",
"#vue/test-utils": "^2.2.6",
"#vue/vue3-jest": "^27.0.0-alpha.4",
"jest": "^27.5.1"
}
The trick was configuring the transform/transformIgnorePatterns as we had not previously needed to transform any Node modules. This fixed the Jest encountered an unexpected token/ SyntaxError: Cannot use import statement outside a module
I did still run into an issue where I could not import Vuetify components in my test files, I would get the following error:
Cannot find module 'vuetify/components' from 'tests/unit/InfoWindow/sections/DisplayFields/ScheduleDisplay.spec.js'
1 | import {shallowMount} from '#vue/test-utils';
2 | import {createVuetify} from 'vuetify';
> 3 | import * as components from 'vuetify/components';
| ^
4 | import * as directives from 'vuetify/directives';
I'm not sure of the cause, but the solution was to add explicit mappings to the Jest config:
"moduleNameMapper": {
"^vuetify/components$": "<rootDir>/node_modules/vuetify/lib/components/index.mjs",
"^vuetify/directives$": "<rootDir>/node_modules/vuetify/lib/directives/index.mjs"
}