Vue-jest: "SyntaxError: Unexpected token u in JSON at position 0" while using jest-vue

[piyushchauhan2011]

Hi @eddyerburgh , I'm trying to use jest-vue with TypeScript support with Vue . My current setup of various files are as follows:

1. package.json Jest Block

"jest": {
    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(tsx?|jsx?)$",
    "moduleFileExtensions": ["ts", "tsx", "vue", "js", "json", "jsx"],
    "verbose": true,
    "mapCoverage": true,
    "transform": {
      "^.+\\.tsx?$": "<rootDir>/node_modules/ts-jest/preprocessor.js",
      ".*\\.(vue)$": "<rootDir>/node_modules/jest-vue"
    }
  }

Also I'm using ts-jest, jest-vue in conjunction with "vue-typescript-import-dts": "^3.1.1" .

1. tsconfig.json

{
  "compilerOptions": {
    "jsx": "preserve",
    "target": "es5",
    "lib": ["dom", "es2015"],
    "module": "es2015",
    "moduleResolution": "node",
    "outDir": "lib",
    "isolatedModules": false,
    "experimentalDecorators": true,
    "declaration": true,
    "noImplicitAny": false,
    "noImplicitThis": false,
    "strictNullChecks": true,
    "removeComments": true,
    "suppressImplicitAnyIndexErrors": true,
    "allowSyntheticDefaultImports": true,
    "types": ["vue-typescript-import-dts"]
  },
  "include": ["./src/**/*"]
}

1. Vue file components use lang="ts" and vue-class-component with vue-property-decorator packages

I'm getting the error as mentioned in Title,
"SyntaxError: Unexpected token u in JSON at position 0" while using jest-vue

Not sure how to resolve this even after stumbling upon many links for solutions.

Full Stack Trace

> jest --coverage

 FAIL  __tests__/login.spec.ts
  ● Test suite failed to run

    SyntaxError: Unexpected token u in JSON at position 0
        at JSON.parse (<anonymous>)

      at compileTypescript (node_modules/jest-vue/lib/compilers/typescript-compiler.js:55:44)
      at processScript (node_modules/jest-vue/lib/process.js:14:12)
      at Object.module.exports [as process] (node_modules/jest-vue/lib/process.js:27:18)

  console.info node_modules/vue/dist/vue.runtime.common.js:7751
    You are running Vue in development mode.
    Make sure to turn on production mode when deploying for production.
    See more tips at https://vuejs.org/guide/deployment.html

Login Spec File

import Vue from 'vue'
import Login from '../src/components/login/Login'

describe('Hello Component', () => {
  let $mounted

  beforeEach(() => {
    $mounted = new Vue(Login).$mount()
  })

  test('snapshot', () => {
    let $html = $mounted.$el.outerHTML
    expect($html).toMatchSnapshot()
  })
})

Cannot share Login.vue file

Versions

    "jest": "^21.2.1",
    "jest-vue": "^0.8.1",
    "ts-jest": "^21.1.3",
    "ts-loader": "^3.0.5",
    "typescript": "^2.5.3",
    "vue-loader": "^13.3.0",
    "vue-template-compiler": "^2.5.2",
    "vue-typescript-import-dts": "^3.1.1",
    "vue": "^2.5.0",
    "vue-class-component": "^6.0.0",
    "vue-property-decorator": "^6.0.0",

[piyushchauhan2011]

I found this repo where testing works correctly. Will update for solutions if I find one ! https://github.com/locoslab/vue-typescript-component-example

[piyushchauhan2011]

I was able to resolve the problem by doing the following setup for package.json and tsconfig.json

1. package.json

{
  "private": true,
  "dependencies": {
    "vue": "^2.5.0",
    "vue-class-component": "^6.0.0",
    "vue-property-decorator": "^6.0.0",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.0",
    "vuex-router-sync": "^5.0.0"
  },
  "devDependencies": {
    "@types/jest": "^21.1.4",
    "@types/node": "^8.0.46",
    "avoriaz": "^6.0.1",
    "babel-jest": "^21.2.0",
    "babel-preset-env": "^1.6.1",
    "codecov": "^3.0.0",
    "jest": "^21.2.1",
    "jest-vue": "^0.8.1",
    "ts-jest": "^21.1.3",
    "ts-loader": "^3.0.5",
    "tslib": "^1.8.0",
    "typescript": "^2.5.3",
    "vue-loader": "^13.3.0",
    "vue-template-compiler": "^2.5.2",
    "vue-typescript-import-dts": "^3.1.1",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.3"
  },
  "jest": {
    "collectCoverageFrom": [
      "src/**/*.{js,ts}",
      "!src/*.{js,ts}",
      "!src/**/*.spec.{js,ts}",
      "!**/*.interface.ts",
      "!src/test-lib/**/*.ts"
    ],
    "collectCoverage": true,
    "coverageReporters": ["lcov"],
    "coverageDirectory": "./coverage",
    "moduleDirectories": ["node_modules", "<rootDir>/"],
    "moduleNameMapper": {
      "^vue$": "vue/dist/vue.common.js"
    },
    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(tsx?|jsx?)$",
    "moduleFileExtensions": ["ts", "tsx", "vue", "js", "json", "jsx"],
    "verbose": true,
    "mapCoverage": true,
    "transform": {
      ".js$": "<rootDir>/node_modules/babel-jest",
      "^.+\\.tsx?$": "<rootDir>/node_modules/ts-jest/preprocessor",
      ".*\\.(vue)$": "<rootDir>/node_modules/jest-vue"
    }
  }
}

1. tsconfig.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "forceConsistentCasingInFileNames": true,
    "importHelpers": true,
    "module": "es6",
    "moduleResolution": "node",
    "newLine": "LF",
    "skipLibCheck": true,
    "noImplicitAny": false,
    "noImplicitThis": false,
    "strictNullChecks": true,
    "sourceMap": true,
    "target": "es5",
    "lib": ["dom", "es2015"],
    "jsx": "preserve",
    "outDir": "lib",
    "isolatedModules": false,
    "declaration": true,
    "removeComments": true,
    "suppressImplicitAnyIndexErrors": true,
    "types": ["vue-typescript-import-dts"]
  },
  "include": ["src/**/*", "__tests__/**/*"]
}

.babelrc looks like this

{
  "presets": ["env"]
}

[piyushchauhan2011]

I think the problem itself is not the jest-vue library, hence we can close down the issue. If there is not example repo, I can push a sample for it 😉 @eddyerburgh

[eddyerburgh]

Glad you solved the issue. an example repo would be great 🙂

[coldino]

This is the top Google result for this issue, so I'll add a quick note. This is not related to jest-vue. For me the error was due to tsconfig.json not being 100% JSON-correct. Removing a few dangling commas sorted the problem.