如何修复 vue-jest 错误 - SyntaxError: Unexpected token 'export'

Question

如何修复 vue-jest 错误 - SyntaxError: Unexpected token \'export\'?

\n

我在 vue-jest 单元测试方面遇到问题。任何帮助将不胜感激。

\n

1.jest.config.js

\n

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

\n

2. 包.json

\n

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

\n

3. 错误信息

\n

me@meme:~/hotel-frontend-vue$ npm run test:unit\n\n> hotel-frontend-vue@0.1.0 test:unit /home/me/hotel-frontend-vue\n> vue-cli-service test:unit\n\n FAIL  tests/unit/example.spec.js\n  \xe2\x97\x8f Test suite failed to run\n\n    Jest encountered an unexpected token\n\n    This usually means that you are trying to import a file which Jest cannot parse, e.g. it\'s not plain JavaScript.\n\n    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".\n\n    Here\'s what you can do:\n     \xe2\x80\xa2 To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.\n     \xe2\x80\xa2 If you need a custom transformation specify a "transform" option in your config.\n     \xe2\x80\xa2 If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.\n\n    You\'ll find more details and examples of these config options in the docs:\n    https://jestjs.io/docs/en/configuration.html\n\n    Details:\n\n    /home/me/hotel-frontend-vue/src/components/HelloWorld.vue:1\n    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export default {\n                                                                                             ^^^^^^\n\n    SyntaxError: Unexpected token \'export\'\n\n      1 | import { shallowMount } from \'@vue/test-utils\'\n    > 2 | import HelloWorld from \'@/components/HelloWorld.vue\'\n        | ^\n      3 | \n      4 | describe(\'HelloWorld.vue\', () => {\n      5 |   it(\'renders props.msg when passed\', () => {\n\n      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)\n      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)\n      at Object.<anonymous> (tests/unit/example.spec.js:2:1)\n\nTest Suites: 1 failed, 1 total\nTests:       0 total\nSnapshots:   0 total\nTime:        0.947s\nRan all test suites.\nnpm ERR! code ELIFECYCLE\nnpm ERR! errno 1\nnpm ERR! hotel-frontend-vue@0.1.0 test:unit: `vue-cli-service test:unit`\nnpm ERR! Exit status 1\nnpm ERR! \nnpm ERR! Failed at the hotel-frontend-vue@0.1.0 test:unit script.\nnpm ERR! This is probably not a problem with npm. There is likely additional logging output above.\n\nnpm ERR! A complete log of this run can be found in:\nnpm ERR!     /home/me/.npm/_logs/2020-12-11T14_1\n

\n

您可以在此分支上找到 Github 存储库：

\n

https://github.com/digitlimit/hotel-frontend-vue/tree/bg-fix-vue-test

\n

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

\n

Answer 1

您的项目缺少 Jest 所需的 Babel 配置来支持import语句。添加<projectRoot>/babel.config.js以下内容：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

并安装@vue/cli-plugin-babel：

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

GitHub PR1 PR2