jest Unexpected token Import when semicolons are appended to import statements

Question

using the vue-cli v3 and adding unit testing and using jest if you append semicolons to the end of import statements jest throws an error Unexpected token import but when there are no semicolons everything works fine

i tried to search about the effects of semicolons to import statements but i got nothing
as far as eslint is concerned i have the vue cli option eslint with error checking only

package.json:

{
  "name": "frontend-jest",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit"
  },
  "dependencies": {
    "core-js": "^2.6.5",
    "register-service-worker": "^1.6.2",
    "vue": "^2.6.10",
    "vue-router": "^3.0.3",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.7.0",
    "@vue/cli-plugin-eslint": "^3.7.0",
    "@vue/cli-plugin-pwa": "^3.7.0",
    "@vue/cli-plugin-unit-jest": "^3.7.0",
    "@vue/cli-service": "^3.7.0",
    "@vue/test-utils": "1.0.0-beta.29",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^23.6.0",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.1.0",
    "vue-template-compiler": "^2.5.21"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ],
  "jest": {
    "moduleFileExtensions": [
      "js",
      "jsx",
      "json",
      "vue"
    ],
    "transform": {
      "^.+\\.vue$": "vue-jest",
      ".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
      "^.+\\.jsx?$": "babel-jest"
    },
    "transformIgnorePatterns": [
      "/node_modules/"
    ],
    "moduleNameMapper": {
      "^@/(.*)$": "<rootDir>/src/$1"
    },
    "snapshotSerializers": [
      "jest-serializer-vue"
    ],
    "testMatch": [
      "**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"
    ],
    "testURL": "http://localhost/",
    "watchPlugins": [
      "jest-watch-typeahead/filename",
      "jest-watch-typeahead/testname"
    ]
  }
}

Code examples:

// this will not work it doesn't matter 
// which import statement has a semicolon
import { shallowMount } from '@vue/test-utils';
import HelloWorld from '@/components/HelloWorld.vue';

describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', () => {
    const msg = 'new message'
    const wrapper = shallowMount(HelloWorld, {
      propsData: { msg }
    })
    expect(wrapper.text()).toMatch(msg)
  })
})

// however this does
import { shallowMount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld.vue'

describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', () => {
    const msg = 'new message'
    const wrapper = shallowMount(HelloWorld, {
      propsData: { msg }
    })
    expect(wrapper.text()).toMatch(msg)
  })
})

expected: semicolon has no effect what happens: test breaks when semicolon is applied

how to reproduce:
1.vue create projectname
2.make sure you have enabled unit testing with jest using vue-cli options
3.go to ./tests/unit/example.spec.js and append semicolons to imports

even after adding semicolons to import statements my test cases are passed. Jest is not giving any errors — Pallamolla Sai, May 19 '19 at 06:48
i didn't know a linter could break my code o.O can you please tell me how eslint can break my tests if there are semicolon options? — TheLinuxPro, May 20 '19 at 01:50
I just thought it might be 1 possibility of causing problem?But for me even after adding semicolons test cases are passed. — Pallamolla Sai, May 20 '19 at 03:15
should i include enviroment information and step through it with a debugger (problem is i dont understand the code that it shows to me when i step through it with a debugger so how about a screenshot?) and perhaps some enviroment information — TheLinuxPro, May 20 '19 at 14:43
could please try these once ? https://stackoverflow.com/questions/54180565/eslint-semi-rule-doesnt-enforce-on-import-statements-before-class-declaration-i — Pallamolla Sai, May 20 '19 at 15:09
If above link doesn't work try this out once please? https://stackoverflow.com/questions/40453894/allow-semi-colons-in-javascript-eslint — Pallamolla Sai, May 20 '19 at 15:09
apologies none of the above worked so i figured to stop wasting my and your time with something that wasn't important, hey if it aint broke dont fix it; dont use semicolons!. thank you for your help but nothing worked and this was not a very important problem for me personally. — TheLinuxPro, May 21 '19 at 22:20

jest Unexpected token Import when semicolons are appended to import statements

0 Answers0