使用 Vue Js 运行 Jest 测试时出现“语法错误：无法在模块外使用 import 语句”

Posted 2023-02-22

【中文标题】使用 Vue Js 运行 Jest 测试时出现“语法错误：无法在模块外使用 import 语句”

【英文标题】："SyntaxError: Cannot use import statement outside a module" when running a Jest test with Vue Js

【发布时间】：2020-05-30 21:52:56

【问题描述】：

我按照本教程https://frontstuff.io/build-your-first-vue-js-component 构建了一个 vue js 组件。 然后我按照本教程https://frontstuff.io/unit-test-your-first-vuejs-component 对组件进行了单元测试。 单元测试在组件的 import 语句处失败并返回此错误：

● 测试套件无法运行

C:\Users\SHINIGAMI-ALFSABAH\Documents\Workspace\Dev\Vue\star-rating\node_modules\vue-awesome\icons\star.js:1
("Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest)import Icon from '../components/Icon.vue'
                                                                                         ^^^^^^

SyntaxError: Cannot use import statement outside a module

  12 | 
  13 | <script>
> 14 |     import 'vue-awesome/icons/star'
     | ^
  15 |     import Icon from 'vue-awesome/components/Icon'
  16 | 
  17 |     export default 

  at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
  at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
  at src/components/Rating.vue:14:1
  at Object.<anonymous> (src/components/Rating.vue:67:3)

任何帮助将不胜感激。

【参考方案1】：

我从之前的类似问题Unexpected token 'import' error while running Jest tests? 中找到了关于 SO 的答案

基本上我必须在我的 jest 配置中更改我的 transformIgnorePatterns 数组：

transformIgnorePatterns: ["/node_modules/"],

到

transformIgnorePatterns: ["/node_modules/(?!vue-awesome)"],

确保 jest 编译 'vue-awesome' 模块以在测试中使用。

【参考方案2】：

我所做的是安装了 vue 和 jest 协同工作所需的依赖项，然后我为 babel 和 jest 创建了一个配置文件。

//Installing dependencies for jest and vue js
npm i -D @vue/test-utils jest vue-jest @vue/babel-preset-app babel-core@^7.0.0-bridge.0

//jest.config.js
module.exports = 
    moduleFileExtensions: ['js', 'jsx', 'json', 'vue'],
    transform: 
        ".*\\.(vue)$": "vue-jest",
        "^.+\\.js$": "<rootDir>/node_modules/babel-jest"
    
;

//babel.config.js
module.exports = 
    presets: [
        '@vue/app'
    ]
;

【参考方案3】：

对我来说，它遇到问题的组件中缺少 name: 字段，然后清除了笑话缓存。