/some_path/MyRecipe.vue:1
<template>
^
SyntaxError: Unexpected token <
1 | import { shallowMount } from "@vue/test-utils"
> 2 | import MyRecipe from "../src/components/MyRecipe.vue"
| ^
3 |
4 | describe('MyRecipe', () => {
5 | test('is a Vue instance', () => {
at Runtime._execModule (node_modules/jest-runtime/build/index.js:1166:56)
at Object.<anonymous> (__tests__/MyRecipe.test.js:2:1)
经过一些研究(例如从这里),我了解到这可能是由于jest期望.js文件,但.vue单文件组件中包含了HTML、JavaScript和CSS,通常由webpack和vue-loader处理。我尝试遵循各种教程中的jest配置,使用vue-jest转换.vue文件,但错误仍然存在。这是我的package.json文件(删除了不必要的部分):
{
"name": "all-recipes ",
"version": "0.1.0",
"private": true,
"scripts": {
// ...
"test": "jest"
},
"dependencies": {
// ...
"core-js": "^3.4.3",
"vue": "^2.6.10"
// ...
},
"devDependencies": {
"@vue/cli-plugin-babel": "^4.1.0",
"@vue/cli-plugin-eslint": "^4.1.0",
"@vue/cli-service": "^4.1.0",
"@vue/test-utils": "^1.0.3",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.3",
"babel-jest": "^26.0.1",
// ...
"jest": "^26.0.1",
"jest-serializer-vue": "^2.0.2",
"vue-jest": "^3.0.5",
"vue-template-compiler": "^2.6.10",
"vue-test-utils": "^1.0.0-beta.11"
},
// ...
"jest": {
"moduleFileExtensions": [
"js",
"json",
"vue"
],
"transform": {
".*\\.,(vue)$": "vue-jest",
"^.+\\.js$": "babel-jest"
},
"snapshotSerializers": [
"jest-serializer-vue"
]
}
}
有没有什么想法是出了什么问题,或者有什么调试技巧可以提供?
编辑:我查看了这个问题,我不认为那里的答案会解决我的问题,因为我想要导入的是一个 .vue 文件,而不是一个 .html 文件。
编辑2:我有一种感觉,jest 似乎只是没有检测到转换器,因为从 package.json 中删除它们并没有改变任何内容。
编辑3:不,jest 正确地使用 vue-jest 进行转换。如果我卸载 vue-jest 并再次运行测试,jest 就会抱怨缺少 vue-jest。
".*\\.,(vue)$": "<rootDir>/node_modules/vue-jest"
而不是文档中所述的简单形式".*\\.(vue)$": "vue-jest"
? - feihcsim