vue-jest 错误：“SyntaxError: Unexpected token <”由`import PictureInput from 'vue-picture-input'`引起

Posted 2023-02-22

【中文标题】vue-jest 错误：“SyntaxError: Unexpected token <”由`import PictureInput from \'vue-picture-input\'`引起

【英文标题】：vue-jest error: "SyntaxError: Unexpected token <" caused by `import PictureInput from 'vue-picture-input'`vue-jest 错误：“SyntaxError: Unexpected token <”由`import PictureInput from 'vue-picture-input'`引起

【发布时间】：2019-05-18 07:40:32

【问题描述】：

我是 Jest 和 vue-jest 的新手。只是试图让基本测试正常工作。

在我的bootstrap.js 文件中（理想情况下，该文件将为所有测试加载），我尝试注册第 3 方组件vue-picture-input：

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

（这是我用于整个项目的标准文件 (bootstrap.js) 文件的一部分。）但是 Jest 给了我以下错误：

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);

我已经查看了 Stack Overflow 上针对此错误的类似问题，但我似乎无法理解发生了什么或我需要更改什么。似乎this answer 解决了类似的问题，但我不知道如何针对这个特定问题调整解决方案（或者说实话，如果它甚至接近）。

目前，我的package.json 文件的“开玩笑”部分内容如下：

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

不知道从这里去哪里......

【参考方案1】：

更新：找到solution on Github。

解决方案是将以下 sn-p 添加到 package.json 的 "jest" 部分：

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

现在可以正常使用了。

【参考方案2】：

我刚刚收到此错误，因为我不小心将 . 放在了 jest.config.js 文件的开头，所以 Jest 忘记了 transform 映射：

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

在这种情况下，配置文件未正确注册但确实存在。