无法使用 Jest 测试 Vue 组件：语法错误 - 意外的标识符答案

【问题标题】：Cannot test Vue component with Jest: Syntax error - Unexpected identifier无法使用 Jest 测试 Vue 组件：语法错误 - 意外的标识符
【发布时间】：2019-09-12 08:25:01
【问题描述】：

项目是使用@vue/cli@3.6.3 创建的。这是 package.json

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint",
  "test": "npm run lint && npm run test:unit",
  "test:unit": "jest --no-cache"
},
"dependencies": {
  "core-js": "^2.6.5",
  "vue": "^2.6.10"
},
"devDependencies": {
  "@vue/cli-plugin-babel": "^3.6.0",
  "@vue/cli-plugin-eslint": "^3.6.0",
  "@vue/cli-service": "^3.6.0",
  "@vue/eslint-config-standard": "^4.0.0",
  "babel-eslint": "^10.0.1",
  "babel-jest": "^24.7.1",
  "eslint": "^5.16.0",
  "eslint-plugin-vue": "^5.0.0",
  "jest": "^24.7.1",
  "vue-jest": "^3.0.4",
  "vue-template-compiler": "^2.5.21"
},
"jest": {
  "transform": {
    "^.+\\.js$": "babel-jest",
    "^.+\\.vue$": "vue-jest"
  }
}

这是我的测试

import Item from '../Item.vue'

describe('Item.vue', () => {
  test('sanity test', () => {
    console.log(Item)
  })
})

组件 Item.vue 存在

<template>
  <div>
    Item
  </div>
</template>

这就是结果

我在导入语句中收到错误消息。我认为这可以通过使用开玩笑的变压器来解决，但事实并非如此。我还需要添加什么才能通过测试？项目地址为this。

【问题讨论】：

标签： vue.js jestjs babel-jest

【解决方案1】：

我想你是因为阅读了 Edd Yerburgh 的 vue 测试书而得到的。代码可在https://www.manning.com/books/testing-vue-js-applications 获得。

我遇到了同样的问题，通过检查我的代码和他们的第 3 章代码之间的差异，找到了 babel.config.js 需要添加的修复：

process.env.VUE_CLI_BABEL_TRANSPILE_MODULES = true
process.env.VUE_CLI_BABEL_TARGET_NODE = 'node'

module.exports = {
  presets: [
    '@vue/app'
  ]
}

祝你好运！

【讨论】：

【解决方案2】：

您从未定义过任何 Item 组件。您在项目中拥有的唯一文件是 Item.vue，它仅包含一个模板，vuejs 无法导入“Item”，因为您从未将模板声明为“Item”。

你应该看看VueJS Documentation about components！在第一个示例中，您可以看到绑定类名模板是如何完成的。

然后你就可以从 Item.vue 中导入“Item”了。

【讨论】：

你提到的例子是一个全局组件。我正在使用单个文件。顺便说一下，当我执行 npm run serve 时，项目运行良好。
即使我在 Item.vue 中添加以下内容也没有什么区别 =>
我无法克隆您的项目并重现当前的情况，但我从this documentation 中发现了您当前配置中缺少的一些内容。顺便说一句，我建议您使用与 src 位于同一级别的 tests 文件夹，而不是在每个组件的文件夹中使用 _tests_ 文件夹.
我不信任该文档，因为他们获得的示例 github 项目已被弃用。