How to fix vue-jest error - SyntaxError: Unexpected token 'export'

Question

How to fix vue-jest error - SyntaxError: Unexpected token 'export'?

I'm having an issue with vue-jest unit test. Any help will be appreciated.

1. jest.config.js

module.exports = {
  preset: '@vue/cli-plugin-unit-jest/presets/no-babel',
  "moduleFileExtensions": [ "js", "ts", "json", "vue" ],
  transform: {
    '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest'
  },  
}

2. package.json

{
  "name": "hotel-frontend-vue",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "register-service-worker": "^1.7.1",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@vue/cli-plugin-e2e-cypress": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-pwa": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-unit-jest": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/test-utils": "^2.0.0-0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.2",
    "typescript": "~3.9.3",
    "vue-jest": "^5.0.0-0"
  }
}

3. Error message

me@meme:~/hotel-frontend-vue$ npm run test:unit

> hotel-frontend-vue@0.1.0 test:unit /home/me/hotel-frontend-vue
> vue-cli-service test:unit

 FAIL  tests/unit/example.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:

    /home/me/hotel-frontend-vue/src/components/HelloWorld.vue:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export default {
                                                                                             ^^^^^^

    SyntaxError: Unexpected token 'export'

      1 | import { shallowMount } from '@vue/test-utils'
    > 2 | import HelloWorld from '@/components/HelloWorld.vue'
        | ^
      3 | 
      4 | describe('HelloWorld.vue', () => {
      5 |   it('renders props.msg when passed', () => {

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
      at Object.<anonymous> (tests/unit/example.spec.js:2:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.947s
Ran all test suites.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! hotel-frontend-vue@0.1.0 test:unit: `vue-cli-service test:unit`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the hotel-frontend-vue@0.1.0 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!     /home/me/.npm/_logs/2020-12-11T14_1

You can find Github repository here on this branch:

https://github.com/digitlimit/hotel-frontend-vue/tree/bg-fix-vue-test

git clone git@github.com:digitlimit/hotel-frontend-vue.git -b bg-fix-vue-test

Answer 1

Your project is missing the Babel configuration that Jest requires to bring in support for import statements. Add <projectRoot>/babel.config.js with these contents:

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

And install @vue/cli-plugin-babel:

npm i -D @vue/cli-plugin-babel

GitHub PR1 PR2