无法使用 Jest 测试 Vue 组件:语法错误 - 意外的标识符
Cannot test Vue component with Jest: Syntax error - Unexpected identifier
项目是用@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>
这是结果
我收到导入语句的错误。我认为这可以通过使用开玩笑的变形金刚来解决,但事实并非如此。我还需要添加什么才能通过测试?项目 url 是 this。
您从未定义过任何 Item 组件。
您项目中唯一的文件是 Item.vue,它只包含一个模板,vuejs 无法导入 'Item',因为您从未将模板声明为 'Item'。
你应该看看VueJS Documentation about components!在第一个示例中,您可以看到绑定类名模板是如何完成的。
然后您将能够从 Item.vue.
导入 'Item'
我想你是因为阅读了 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'
]
}
祝你好运!
项目是用@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>
这是结果
我收到导入语句的错误。我认为这可以通过使用开玩笑的变形金刚来解决,但事实并非如此。我还需要添加什么才能通过测试?项目 url 是 this。
您从未定义过任何 Item 组件。 您项目中唯一的文件是 Item.vue,它只包含一个模板,vuejs 无法导入 'Item',因为您从未将模板声明为 'Item'。
你应该看看VueJS Documentation about components!在第一个示例中,您可以看到绑定类名模板是如何完成的。
然后您将能够从 Item.vue.
导入 'Item'我想你是因为阅读了 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'
]
}
祝你好运!