Vue.js 如何修复vue jest错误-语法错误：意外标记“导出”

如何修复vue jest错误-语法错误：意外的令牌“导出”

我对vue jest单元测试有问题。任何帮助都将不胜感激

一,。jest.config.js

三,。错误消息

---

您的项目缺少Jest为支持导入语句而需要的Babel配置。添加包含以下内容的/babel.config.js：

module.exports={ 预设：[ “@vue/cli插件babel/preset” ] } 并安装@vue/cli插件babel:

---

您的项目缺少Babel配置，Jest需要该配置来支持导入语句。添加包含以下内容的/babel.config.js：

module.exports={ 预设：[ “@vue/cli插件babel/preset” ] } 并安装@vue/cli插件babel:

module.exports = {
  preset: '@vue/cli-plugin-unit-jest/presets/no-babel',
  "moduleFileExtensions": [ "js", "ts", "json", "vue" ],
  transform: {
    '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest'
  },  
}

{
  "name": "hotel-frontend-vue",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "register-service-worker": "^1.7.1",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@vue/cli-plugin-e2e-cypress": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-pwa": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-unit-jest": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/test-utils": "^2.0.0-0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.2",
    "typescript": "~3.9.3",
    "vue-jest": "^5.0.0-0"
  }
}

me@meme:~/hotel-frontend-vue$ npm run test:unit

> hotel-frontend-vue@0.1.0 test:unit /home/me/hotel-frontend-vue
> vue-cli-service test:unit

 FAIL  tests/unit/example.spec.js
  ● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /home/me/hotel-frontend-vue/src/components/HelloWorld.vue:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export default {
                                                                                             ^^^^^^

    SyntaxError: Unexpected token 'export'

      1 | import { shallowMount } from '@vue/test-utils'
    > 2 | import HelloWorld from '@/components/HelloWorld.vue'
        | ^
      3 | 
      4 | describe('HelloWorld.vue', () => {
      5 |   it('renders props.msg when passed', () => {

      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 Object.<anonymous> (tests/unit/example.spec.js:2:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.947s
Ran all test suites.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! hotel-frontend-vue@0.1.0 test:unit: `vue-cli-service test:unit`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the hotel-frontend-vue@0.1.0 test:unit script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/me/.npm/_logs/2020-12-11T14_1

git clone git@github.com:digitlimit/hotel-frontend-vue.git -b bg-fix-vue-test

npm i -D @vue/cli-plugin-babel