Unit Testing Vue Component - Jest Setup - Unexpected Identifier error

Question

I am new to Jest and am trying to run a simple unit test just to ensure everything is set up correctly and have been running in to lots of issues troubleshooing errors during compile time.

When running the testing suite, Jest is successfully finding the file I am trying to test and generates the following Unexpected Identifier error message on line 1. Any idea why this is? is something missing? I have been trying to troubleshoot this for quite some time.

/Users/foo/Sites/test/Test.spec.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import Test from './Test.vue';
                                                                                                    ^^^^

    SyntaxError: Unexpected identifier

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)

Note, removing the import statements altogether runs the test successfully. However, the whole reason I set up Jest was to test vue components.

Test.vue

<template>
        <div class="test">
        </div>
</template>

<script>
    export default {
        name: 'test',
        components: { },
        data() {
            return {

            }
        },
        methods: {
            helloWorld() {
                return 'hello world';
            }
        }
    }
</script>

Test.spec.js

import Test from './Test.vue'

describe('Test',() => {
   it('test', () => {
     expect(true).toBe(true);
   });
});

package.json

"devDependencies": {
    "@vue/test-utils": "^1.0.0-beta.25",
    "axios": "^0.18.0",
    "babel-core": "^6.26.0",
    "babel-jest": "^23.6.0",
    "babel-loader": "^7.1.2",
    "cross-env": "^5.1.1",
    "file-loader": "^2.0.0",
    "jest": "^23.6.0",
    "jquery": "^3.2",
    "laravel-mix": "^2.0",
    "lodash": "^4.17.4",
    "popper.js": "^1.14.3",
    "source-map-support": "^0.5.9",
    "vue": "^2.5.7",
    "vue-jest": "^3.0.0",
    "vue-test-utils": "^1.0.0-beta.11",
    "webpack": "^3.8.1"
  },
  "jest": {
    "moduleFileExtensions": [
      "js",
      "json",
      "vue"
    ],
    "transform": {
      ".*\\.(vue)$": "vue-jest",
      "^.+\\.js$": "babel-jest"
    }
  }

Stamatios Stamoulas Stamatios Stamoulas · Accepted Answer · 2018-12-26T11:10:20

You are using ES6 features in your test, namely the import statement, so you need to compile them down to ES5 using a preset.

Create a babel.config.js and add @babel/preset-env, like so,

//babel.config.js
module.exports = {
  presets: ["@babel/preset-env"]
};

Next, in your package.json under the jest setting, let jest know where the root of your test code is located, and the module directories that will be recursively searched by jest, like so,

//package.json
"roots": [
  "test"
],
"moduleDirectories": [
  "test",
  "node_modules"
],

Unit Testing Vue Component - Jest Setup - Unexpected Identifier error

1 Answers