Vue Jest(Jest单元测试):SyntaxError:不能在模块外使用import语句



我是Vue单元测试的新手,在尝试第一次测试后,我一直收到相同的错误。这似乎适用于前两个import语句,但不适用于eps-spinners语句。我尝试了所有方法,在论坛和Github上查找了很多,但找不到解决方案。我所尝试的一切似乎都不起作用。我需要帮助!

谢谢:(

错误

PASS  test/jesttest.spec.js (5.243s)
● Console
console.log test/jesttest.spec.js:18
red
FAIL  test/ExitUserCompany.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:
C:9rayaanforderungsportalanforderungsportalfrontendnode_modulesepic-spinnerssrclib.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import HollowDotsSpinner from './components/lib/HollowDotsSpinner.vue';
                       ^^^^^^
SyntaxError: Cannot use import statement outside a module
73 | import {CompanyService} from "@/common/api/company.service";
74 | import {AssetDBDataService} from "@/common/api/assetDBData.service";
> 75 | import { SelfBuildingSquareSpinner } from 'epic-spinners'
| ^
76 | 
77 |   moment.locale('de');
78 | 
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1059:14)
at src/layouts/MainLayout.vue:75:1
at Object.<anonymous> (src/layouts/MainLayout.vue:290:3)
Test Suites: 1 failed, 1 passed, 2 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        22.188s

package.json(带有Jest配置(

{
"scripts": {
"serve": "vue-cli-service serve --host localhost",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test": "jest"
},
"dependencies": {
"@babel/polyfill": "^7.2.5",
"@babel/runtime": "^7.3.1",
"axios": "^0.18.0",
"bulma": "^0.7.5",
"deep-object-diff": "^1.1.0",
"epic-spinners": "^1.1.0",
"etcdjs": "^2.4.2",
"etcdjs-promise": "^1.0.0",
"js-base64": "^2.5.1",
"js-file-download": "^0.4.9",
"keycloak-js": "^4.0.0",
"luxon": "^1.17.1",
"moment": "^2.24.0",
"register-service-worker": "^1.5.2",
"url-loader": "^1.0.1",
"vee-validate": "^2.2.12",
"vue": "2.6.5",
"vue-axios": "^2.1.4",
"vue-cookies": "^1.6.1",
"vue-datetime": "^1.0.0-beta.10",
"vue-router": "^3.0.1",
"vue-select": "^3.1.0",
"vuedraggable": "^2.23.0",
"vuex": "^3.1.0",
"vuex-router-sync": "^5.0.0"
},
"devDependencies": {
"@babel/plugin-transform-runtime": "^7.2.0",
"@vue/cli-plugin-babel": "^3.3.0",
"@vue/cli-plugin-eslint": "^3.3.0",
"@vue/cli-plugin-pwa": "^3.3.0",
"@vue/cli-service": "^3.3.0",
"@vue/test-utils": "^1.0.0-beta.31",
"ant-design-vue": "^1.4.5",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^25.1.0",
"babel-plugin-import": "^1.11.0",
"jest": "^25.1.0",
"jest-transform-stub": "^2.0.0",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"vue-jest": "^3.0.5",
"vue-template-compiler": "2.6.5"
},
"jest": {
"moduleFileExtensions": [
"js",
"json",
"vue",
"ts"
],
"moduleNameMapper": {
"^@/(.*)$": "<rootDir>/src/$1",
"^.+.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub"
},
"transform": {
".*\.(vue)$": "vue-jest",
"^.+\.js$": "<rootDir>/node_modules/babel-jest",
".+\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub"
},
"modulePaths": [
"<rootDir>/src",
"<rootDir>/node_modules"
],
"transformIgnorePatterns": ["/node_modules/(?!epic-spinners)/"]
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}

.babelrc

{
"env": {
"test": {
"presets": [["@babel/env", { "targets": { "node": "current" } }]]
}
}
}

babel.config.js

module.exports = {
plugins: [
[
"import",
{ libraryName: "ant-design-vue", libraryDirectory: "es", style: true }
],
"@babel/plugin-syntax-dynamic-import"
]
}

你能试试下面的吗?

安装npm模块

npm i -D @vue/babel-preset-app

babel.config.js

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

相关内容

最新更新