Jest fails with SyntaxError: Unexpected token {

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 <[email protected]>",
  "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.