Vue/Typescript/Jest - Jest 单元测试语法错误：意外的令牌导入

Posted 2023-02-22

【中文标题】Vue/Typescript/Jest - Jest 单元测试语法错误：意外的令牌导入

【英文标题】：Vue/Typescript/Jest - Jest Unit Test SyntaxError: Unexpected token import

【发布时间】：2019-03-27 18:14:59

【问题描述】：

我正在运行一个 Vue/Typescript/Vuetify 项目（使用 vue cli 3 创建）。对于单元测试，我使用的是 Jest。我升级到了更新版本的 Vuetify(1.3.1)。自升级以来，我在运行 Jest 测试时遇到错误：

location_to_project\node_modules\vuetify\lib\index.js:1
    ("Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest)import Vuetify from './components/Vuetify';
                                                                                        ^^^^^^
   SyntaxError: Unexpected token import

      1 | import Vue from 'vue'
      2 | // @ts-ignore
    > 3 | import Vuetify from 'vuetify/lib'
        | ^
      4 | import 'vuetify/src/stylus/app.styl'
      5 |
      6 | Vue.use(Vuetify, 

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:4    7)
03:17)
      at Object.<anonymous> (src/plugins/vuetify.ts:3:1)

版本和环境

Vuetify: 1.3.0 Vue: 2.5.17

曾在：

Vuetify: 1.2.10 Vue: 2.5.17

babel.config.js

module.exports = 
  presets: [
        [
            "@vue/app",
            
                useBuiltIns: "entry"
            
    ],
  ],
;

tsConfig 编译器：

"target": "esnext"

"module": "esnext"

【问题讨论】：

当我在版本 1.1.13 中尝试按照您的方式导入时，我遇到了同样的错误。我不知道为什么这以前曾经奏效过。

【参考方案1】：

我遇到了同样的问题。 但是，我可以通过以下解决方法。

import Vuetify from 'vuetify'

只需删除“/lib”

【讨论】：

当我听从你的建议时，我摆脱了关于那条线的错误。但是，在下一行检测到错误：import 'vuetify/src/stylus/app.styl'。此外，在 Vuetify 包中进行更改有点可怕......

为什么需要导入样式（比如css）？删除它怎么样？

谢谢！我找到了问题的根源：我正在测试的组件从main.js 导入了一个事件总线，而正是 在这个main.js 文件中 中的 Vuetify 导入导致了问题。我重组了我的代码，使组件不再从main.js 导入

【参考方案2】：

我遇到了类似（奇怪）的问题。在this 线程中找到了答案。

解决方案是运行

npx jest --clearCache

然后测试就开始了。