无法使用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>

这就是结果

enter image description here

我在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

运行笑话测试时出现意外的令牌导入错误

开玩笑:测试套件无法运行,意外令牌 =

如何从 jest.setup.js 中的配置修复酶上的“语法错误:意外标识符”

如何使用 jest 测试 Vue.js 组件中方法的错误