vue-jest error: "SyntaxError: Unexpected token <" caused by `import PictureInput from 'vue-picture-input'`

Question

I'm new to Jest and vue-jest. Just trying to get basic tests working.

In my bootstrap.js file (this file will, ideally, be loaded for all tests), I attempt to register the 3rd party component vue-picture-input:

import PictureInput from 'vue-picture-input';
Vue.component('picture-input', PictureInput);

(This is part of a standard file (bootstrap.js) file I use for my entire project.) But Jest gives me the following error:

Details:

/home/vagrant/Code/Patrol/node_modules/vue-picture-input/PictureInput.vue:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<template>
                                                                                         ^

SyntaxError: Unexpected token <

  85 | // ...
  86 | 
> 87 | import PictureInput from 'vue-picture-input';
     | ^
  88 | Vue.component('picture-input', PictureInput);

I've taken a look at similar questions on Stack Overflow for this error, but I can't seem to decipher what is going on or what I need to change. Seems like this answer addresses a similar issue, but I don't know how to adapt the solution for this particular issue (or if it's even close, to be honest).

Currently, the "jest" section of my package.json file reads:

"jest": {
  "moduleFileExtensions": [
    "js",
    "json",
    "vue"
  ],
  "moduleNameMapper": {
    "\\.(css|scss|sass|less)$": "<rootDir>/tests/js/config/cssLoader.js"
  },
  "transform": {
    ".*\\.(vue)$": "vue-jest",
    "^.+\\.js$": "<rootDir>/node_modules/babel-jest"
  }
}

Not sure where to go from here...

score 1 · Answer 1 · answered Dec 18 '18 at 16:59

1

Update: Found the solution on Github.

The solution was to add the following snippet to package.json in the "jest" section:

"transformIgnorePatterns": [
  "node_modules/(?!vue-picture-input)"
]

Now it works fine.

answered Dec 18 '18 at 16:59

fronzee

1,668
2
21
32

score 0 · Answer 2 · answered Jul 10 '20 at 07:13

I was just getting this error because I accidentally put a . on the beginning of my jest.config.js file, so Jest was forgetting the transform mappings:

transform: {
    '^.+\\.js$': 'babel-jest',
    '^.+\\.vue$': 'vue-jest',
},'

In this case, the config file wasn't registered properly but did exist.

vue-jest error: "SyntaxError: Unexpected token <" caused by `import PictureInput from 'vue-picture-input'`

2 Answers2