带有 jest 的 vue-test-utils 为 map-spread 运算符抛出了意外的令牌错误

Posted 2023-02-22

【中文标题】带有 jest 的 vue-test-utils 为 map-spread 运算符抛出了意外的令牌错误

【英文标题】：vue-test-utils with jest throws unexpected token error for map-spread operator

【发布时间】：2018-10-17 21:34:41

【问题描述】：

我试图按照本指南 https://vue-test-utils.vuejs.org/en/guides/testing-SFCs-with-jest.html 为我的 Vue 项目设置测试

我完成了指南并为我的一个组件创建了一个测试。然后我运行jest 并收到以下错误：

unknown: Unexpected token (10:4)
         8 | export default 
         9 |   computed: 
      > 10 |     ...mapGetters([
           |     ^
        11 |       'user'
        12 |     ])
        13 |   

我已经用谷歌搜索了这个错误并查看了其他示例项目，但我仍然不知道如何解决这个问题。

任何帮助将不胜感激。

App.vue

<template>
  <div id="app" />
</template>

<script>
  import  mapGetters  from 'vuex'

  export default 
    computed: 
      ...mapGetters([
        'user'
      ])
    
  
</script>

App.spec.js

import  shallow  from '@vue/test-utils'
import App from './App'

describe('App', () => 

  it('works', () => 
    const wrapper = shallow(App)

    expect(wrapper.isVueInstance()).toBeTruthy()
  )
)

.babelrc

"presets": [
    ["env",  "modules": false ]
  ],
  "env": 
    "test": 
      "presets": [
        ["env",  "targets":  "node": "current" ]
      ]
    
  

package.json（只是开玩笑的一部分）

"jest": 
    "moduleFileExtensions": [
      "js",
      "json",
      "vue"
    ],
    "transform": 
      ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest",
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest"
    ,
    "snapshotSerializers": [
      "<rootDir>/node_modules/jest-serializer-vue"
    ],
    "moduleNameMapper": 
      "^@/(.*)$": "<rootDir>/src/$1"
    
  

【参考方案1】：

通过这个答案： SyntaxError on spread operator, while using babel env preset

要使用扩展运算符，必​​须使用 babel-plugin-transform-object-rest-spread，所以安装它： npm install --save-dev babel-plugin-transform-object-rest-spread

并将其添加到 .babelrc 中的“插件”选项下： "plugins": ["transform-object-rest-spread"]

另外，查看https://vue-test-utils.vuejs.org/guides/#mocking-getters 在测试中模拟你的吸气剂。

【讨论】：

这行得通，但是有一些关于 ...（传播）运算符的警告，要修复它 newer version of the plugin 需要在你的 package.json 中