无法使用Jest测试Vue组件:语法错误 - 意外的标识符
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了无法使用Jest测试Vue组件:语法错误 - 意外的标识符相关的知识,希望对你有一定的参考价值。
使用@ 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>
这就是结果
我在import语句中得到错误。我认为这将通过使用开关变换器来处理,但事实并非如此。通过测试还需要添加什么?项目网址是this。
答案
您从未定义过任何Item组件。您项目中唯一的文件是Item.vue,它只包含一个模板,vuejs无法导入'Item',因为您从未将模板声明为'Item'。
你应该看看VueJS Documentation about components!在第一个示例中,您可以看到绑定classname-template是如何完成的。
然后,您将能够从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'
]
祝好运!
以上是关于无法使用Jest测试Vue组件:语法错误 - 意外的标识符的主要内容,如果未能解决你的问题,请参考以下文章
使用 Vue Js 运行 Jest 测试时出现“语法错误:无法在模块外使用 import 语句”
用 Jest 测试 Vue 失败,Jest 遇到了意外的令牌,SyntaxError: Unexpected token import