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

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",

[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.

[eddyerburgh]

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