Jest fails with SyntaxError: Unexpected token { - jestjs

Question

I'm integrating jest into my nuxt application using vue-test-utils (following Edd Yerburgh's new book).
The test fails right out of the box with "SyntaxError: Unexpected token {". Similar code builds fine with nuxt and the tests ran with Ava. I'm assuming that I have a problem with my jest configuration.
I've included my package.json, code excerpt and console out.
Thanks for any help,
Dan
npm 6.4.0
package.json
{
"name": "cxl-ui-base",
"version": "1.0.0",
"description": "Base UI for SA and CXL",
"author": "Dan Mahoney <dan.mahoney#contextlabs.com>",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"test:coverage": "TEST=unit nyc --report-dir=generated-files/coverage ava --tap | tap-summary",
"test:unit": "NODE_ENV=testing jest --verbose --no-cache",
"test:watch": "NODE_ENV=pro ava --watch",
"lint": "eslint -f node_modules/eslint-detailed-reporter/lib/detailed.js --ext .js,.vue -o generated-files/lint.html .",
"doc": "jsdoc -c doc.conf.js"
},
"dependencies": {
"#nuxtjs/auth": "^4.5.1",
"#nuxtjs/axios": "^5.3.1",
"#nuxtjs/dotenv": "^1.1.1",
"ava-describe": "^2.0.0",
"axios": "^0.18.0",
"body-parser": "^1.18.3",
"dotenv": "^5.0.1",
"eslint-import-resolver-alias": "^1.1.1",
"express": "^4.16.3",
"jsdoc-vue": "^1.0.0",
"jsonwebtoken": "^8.2.1",
"leaflet": "^1.3.1",
"lodash": "^4.17.10",
"moment": "^2.22.1",
"npm": "^6.4.0",
"nuxt": "1.4.1",
"nuxt-leaflet": "0.0.10",
"nuxt-material-design-icons": "^1.0.4",
"oauth-1.0a": "^2.2.4",
"vue": "^2.5.16",
"vue-d3": "^0.1.0",
"vue-i18n": "^7.6.0",
"vue-uuid": "^1.0.0",
"vue2-leaflet": "^1.0.2",
"vuelidate": "^0.7.2",
"vuetify": "^1.0.17",
"vuex": "^3.0.1",
"webpack-node-externals": "^1.7.2"
},
"devDependencies": {
"#babel/core": "^7.0.0-rc.2",
"#vue/test-utils": "^1.0.0-beta.19",
"ajv": "^6.5.0",
"babel-eslint": "^7.2.3",
"babel-jest": "^23.4.2",
"babel-plugin-add-module-exports": "^0.3.3",
"babel-plugin-transform-imports": "^1.4.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-2": "^6.24.1",
"babel-preset-vue-app": "^2.0.0",
"chromedriver": "^2.38.3",
"eslint": "^4.3.0",
"eslint-config-airbnb-base": "^12.1.0",
"eslint-config-standard": "^10.2.1",
"eslint-detailed-reporter": "^0.7.3",
"eslint-import-resolver-webpack": "^0.9.0",
"eslint-loader": "^1.9.0",
"eslint-plugin-html": "^4.0.3",
"eslint-plugin-import": "^2.12.0",
"eslint-plugin-jsdoc": "^3.7.1",
"eslint-plugin-leon-require-jsdoc": "0.0.1",
"eslint-plugin-node": "^5.2.1",
"eslint-plugin-promise": "^3.7.0",
"eslint-plugin-standard": "^3.1.0",
"eslint-plugin-vue": "^4.5.0",
"eslint-plugin-vue-a11y": "0.0.26",
"jest": "^23.5.0",
"jest-vue-preprocessor": "^1.4.0",
"jsdoc": "^3.5.5",
"jsdom": "^11.11.0",
"jsdom-global": "^3.0.2",
"loglevel": "^1.6.1",
"nightwatch": "^0.9.21",
"npm-merge-driver": "^2.3.5",
"raf": "^3.4.0",
"require-extension-hooks": "^0.3.2",
"require-extension-hooks-babel": "^0.1.1",
"require-extension-hooks-vue": "^1.0.0",
"selenium": "^2.20.0",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.1",
"tap-summary": "^4.0.0",
"vue-jest": "^2.6.0",
"vue-loader": "^13.7.2",
"vue-meta": "^1.5.0",
"vue-template-compiler": "^2.5.16"
},
"jest": {
"transform": {
"^.+\\.js$": "babel-jest",
"^.+\\.vue$": "vue-jest"
}
},
"eslintConfig": {
"env": {
"browser": true,
"node": true,
"jest": true
}
}
}
Code
import { shallowMount, createLocalVue } from '#vue/test-utils';
import Vuetify from 'vuetify';
import test from 'jest';
import ClientMap from '#/components/Map'; // eslint-disable-line
import { commonAssertions } from '#/plugins/test.utils';
// for mocking
import modal from '#/components/Modal'; // eslint-disable-line
const localVue = createLocalVue();
localVue.use(Vuetify);
test('Sanity Test', () => {});
test('Initial State', (t) => {
const $modal = sinon.mock(modal);
const wrapper = shallowMount(Map, {
mocks: {
$modal,
},
localVue,
});
commonAssertions(Map, t, wrapper);
});
test.todo('Select Layer');
test.todo('Test Modal??');
test.todo('Test Tooltip??');
test.todo('UnSelect Layer');
Relevant Output
FAIL src/test/specs/map.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:
/Users/dan.mahoney/Projects/cxl-ui-base/src/test/specs/map.spec.js:10
import { shallowMount, createLocalVue } from '#vue/test-utils';
^
SyntaxError: Unexpected token {
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 1.045s

Answer 1

The problem is that nuxt puts the babel config into nuxt.config.js. I found an npm package that solves that. It allows you to have a .babelrc file and have it injected into nuxt.config.js. When Jest compiles the files for testing, it uses .babelrc. Kudos to the author.

Answer 2

You should set the NODE_ENV to test then run the jest
you can do it by adding this line to your package.json file
"scripts": {
....
"test": "NODE_ENV=test jest"
},