Question

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

在我的bootstrap.js文件中（理想情况下，将为所有测试加载该文件），我尝试注册第三方组件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"
  }
}

不确定从这里去哪里...

Answer 1

更新：找到了solution on Github。

解决方案是在package.json部分的"jest"中添加以下代码段：

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

现在可以正常工作了。

Answer 2

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

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

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

vue开玩笑的错误：“语法错误：意外的标记<”，是由于从“ vue-picture-input”导入PictureInput引起的

2 个答案: