获取导入错误 vuejs + jest + Vuetify
Posted
技术标签:
【中文标题】获取导入错误 vuejs + jest + Vuetify【英文标题】：Getting import error vuejs + jest + Vuetify 【发布时间】：2018-06-11 13:01:15 【问题描述】：运行单元测试时出现以下导入错误
● 测试套件无法运行
/Users/aniruddha/works/awsportal_2/node_modules/vuetify/es5/components/VDivider/VDivider.js:3
import Themeable from '../../mixins/themeable';
^^^^^^
SyntaxError: Unexpected token import
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:305:17)
at Object.<anonymous> (src/components/Account.vue:17:67)
at Object.<anonymous> (test/unit/specs/Account.spec.js:5:16)
这里是调试输出
"configs": [
"automock": false,
"browser": false,
"cache": true,
"cacheDirectory": "/var/folders/7y/_sh8syl163xdy6jfyc7bww8w0000gn/T/jest_dx",
"clearMocks": false,
"coveragePathIgnorePatterns": [
"/node_modules/"
],
"globals": ,
"haste":
"providesModuleNodeModules": []
,
"moduleDirectories": [
"node_modules",
"/Users/aniruddha/works/awsportal_2"
],
"moduleFileExtensions": [
"js",
"json",
"vue"
],
"moduleNameMapper": [
[
"^@/(.*)$",
"/Users/aniruddha/works/awsportal_2/src/$1"
],
[
"^vue$",
"vue/dist/vue.common.js"
]
],
"modulePathIgnorePatterns": [],
"name": "a49c5965915e40b9abc5a5cfedaeeb54",
"resetMocks": false,
"resetModules": false,
"rootDir": "/Users/aniruddha/works/awsportal_2",
"roots": [
"/Users/aniruddha/works/awsportal_2"
],
"runner": "jest-runner",
"setupFiles": [
"/Users/aniruddha/works/awsportal_2/test/unit/setup.js"
],
"snapshotSerializers": [],
"testEnvironment": "jest-environment-jsdom",
"testMatch": [
"**/__tests__/**/*.js?(x)",
"**/?(*.)(spec|test).js?(x)"
],
"testPathIgnorePatterns": [
"/node_modules/"
],
"testRegex": "",
"testRunner": "/Users/aniruddha/works/awsportal_2/node_modules/jest-jasmine2/build/index.js",
"testURL": "about:blank",
"timers": "real",
"transform": [
[
"^.+\\.js$",
"/Users/aniruddha/works/awsportal_2/node_modules/babel-jest/build/index.js"
],
[
".*\\.(vue)$",
"/Users/aniruddha/works/awsportal_2/node_modules/jest-vue-preprocessor/index.js"
]
],
"transformIgnorePatterns": [
"/node_modules/"
],
"watchPathIgnorePatterns": []
],
"globalConfig":
"bail": false,
"changedFilesWithAncestor": false,
"collectCoverage": true,
"collectCoverageFrom": [
"src/**/*.js,vue",
"!src/main.js",
"!src/router/index.js",
"!**/node_modules/**"
],
"coverageDirectory": "/Users/aniruddha/works/awsportal_2/coverage",
"coverageReporters": [
"html"
],
"expand": false,
"listTests": false,
"mapCoverage": true,
"maxWorkers": 3,
"noStackTrace": false,
"nonFlagArgs": [
"test/unit/specs"
],
"notify": false,
"onlyChanged": false,
"rootDir": "/Users/aniruddha/works/awsportal_2",
"runTestsByPath": false,
"testFailureExitCode": 1,
"testPathPattern": "test/unit/specs",
"testResultsProcessor": null,
"updateSnapshot": "new",
"useStderr": false,
"verbose": true,
"watch": false,
"watchman": true
,
"version": "21.2.1"
PASS test/unit/specs/ConfigRule.spec.js
ConfigRule.vue
✓ component have title (4ms)
✓ render template correctly (38ms)
FAIL test/unit/specs/Account.spec.js
● Test suite failed to run
/Users/aniruddha/works/awsportal_2/node_modules/vuetify/es5/components/VDivider/VDivider.js:3
import Themeable from '../../mixins/themeable';
^^^^^^
SyntaxError: Unexpected token import
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:305:17)
at Object.<anonymous> (src/components/Account.vue:17:67)
at Object.<anonymous> (test/unit/specs/Account.spec.js:5:16)
Test Suites: 1 failed, 1 passed, 2 total
Tests: 2 passed, 2 total
Snapshots: 0 total
Time: 3.064s
Ran all test suites matching /test\/unit\/specs/i.
=============================== Coverage summary ===============================
Statements : 0.13% ( 1/775 )
Branches : 0% ( 0/277 )
Functions : 0.51% ( 1/198 )
Lines : 0.14% ( 1/706 )
================================================================================
package.json
"name": "awsportal_redesigned",
"version": "1.0.0",
"description": "POC",
"author": "Aniruddha Gaikwad <anieruddhad@gmail.com>",
"private": true,
"scripts":
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"test": "jest test/unit/specs --coverage",
"lint": "eslint --ext .vue src test/unit/specs",
"build": "node build/build.js"
,
"dependencies":
"vue": "^2.5.3",
"vue-router": "^3.0.1",
"vue-session": "^0.9.10",
"vuelidate": "^0.6.1",
"vuetify": "^0.17.4",
"vuex": "^3.0.1"
,
"devDependencies":
"autoprefixer": "^7.1.2",
"babel-core": "^6.26.0",
"babel-eslint": "^7.1.1",
"babel-jest": "^21.2.0",
"babel-loader": "^7.1.1",
"babel-plugin-add-filehash": "^6.9.4",
"babel-plugin-dynamic-import-node": "^1.2.0",
"babel-plugin-module-resolver": "^3.0.0",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-system-import-transformer": "^3.1.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"eslint": "^3.19.0",
"eslint-config-airbnb-base": "^11.3.0",
"eslint-friendly-formatter": "^3.0.0",
"eslint-import-resolver-webpack": "^0.8.3",
"eslint-loader": "^1.7.1",
"eslint-plugin-html": "^3.0.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-vue": "^4.0.0",
"eventsource-polyfill": "^0.9.6",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"jest": "^21.2.0",
"jest-babel-preprocessor": "^0.3.0",
"jest-cli": "^22.0.4",
"jest-vue-preprocessor": "^1.3.1",
"jsdom": "^11.5.1",
"node-notifier": "^5.1.2",
"node-sass": "^4.7.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"rimraf": "^2.6.0",
"sass-loader": "^6.0.6",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.1",
"url-loader": "^0.5.8",
"vue-jest": "^1.0.2",
"vue-loader": "^13.3.0",
"vue-server-renderer": "^2.5.13",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.3",
"vue-test-utils": "^1.0.0-beta.9",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
,
"jest":
"verbose": true,
"moduleDirectories": [
"node_modules",
"<rootDir>/"
],
"moduleFileExtensions": [
"js",
"json",
"vue"
],
"moduleNameMapper":
"^@/(.*)$": "<rootDir>/src/$1",
"^vue$": "vue/dist/vue.common.js"
,
"transform":
"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
".*\\.(vue)$": "<rootDir>/node_modules/jest-vue-preprocessor",
".*": "<rootDir>/node_modules/babel-jest"
,
"setupFiles": [
"<rootDir>/test/unit/setup"
],
"mapCoverage": true,
"collectCoverageFrom": [
"src/**/*.js,vue",
"!src/main.js",
"!src/router/index.js",
"!**/node_modules/**"
],
"collectCoverage": true,
"coverageReporters": [
"html"
],
"coverageDirectory": "./coverage",
"unmockedModulePathPatterns": [
"<rootDir>/node_modules/react"
]
,
"engines":
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
,
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
【问题讨论】：
你使用 webpack 吗？如果是，请发布您的 webpack 配置。 @dvnguyen ：开玩笑不使用 webpack。使用命令“jest test/unit/specs --coverage”运行 jest。添加了 package.json 那么在运行测试之前你会转译你的 es6 代码吗？ @dvnguyen：是的。我在 .babelrc 中添加了 transform-es2015-modules-commonjs 两个测试文件都使用import吗？如果他们都这样做并且一个失败，那么请仔细检查您的 Vue 模块是否有任何可疑之处。如果问题是使用 import 语句的组件所独有的，那么您需要查看您的 jest 配置。我遇到了类似的问题，但发现有一次babel-jest 和我的.js 转换在我的配置中正确设置，我使用import 的组件运行良好。
【参考方案1】：
问题出在 babel 配置上。在浏览了不同的帖子后，.babelrc 中的以下配置对我有用
"presets": [
["env", "modules": false],
["stage-2"]
],
"env":
"test":
"presets": [
["env", "targets": "node": "current" ]
]
【讨论】：
如果它解决了您的问题，您应该将自己的答案标记为正确的答案:)以上是关于获取导入错误 vuejs + jest + Vuetify的主要内容，如果未能解决你的问题，请参考以下文章
Vue/Typescript/Jest - Jest 单元测试语法错误：意外的令牌导入
两个 shallowmount 抛出错误 Jest VueJs(Vuetify)
使用 Vue Js 运行 Jest 测试时出现“语法错误：无法在模块外使用 import 语句”
Jest + Vue3 + @Vueform/slider “语法错误：不能在模块外使用导入语句”