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

时间:2019-04-23 07:34:17

标签: vue.js jestjs babel-jest

使用@ 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>

这就是结果

enter image description here

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

2 个答案:

答案 0 :(得分:0)

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

您应该看看VueJS Documentation about components!在第一个示例中,您可以看到绑定类名模板的完成方式。

然后,您将能够从Item.vue导入“ Item”。

答案 1 :(得分:0)

我想您是通过阅读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'
  ]
}

祝你好运!