为什么测试失败并出现错误SyntaxError:意外的令牌｛

Question

您好！该项目使用webpack5，测试本身是在转换之前编写的。babel显然存在问题，尽管配置是根据jest文档编写的我尝试了所有的方法，在论坛和Github上查找了很多，但我找不到解决方案。我所尝试的一切似乎都不起作用。我需要帮助！非常感谢。

({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { shallowMount, mount, createLocalVue } from '@vue/test-utils';
                          ^
SyntaxError: Unexpected token {
at Runtime.createScriptFromCode (../../node_modules/jest-runtime/build/index.js:1350:14)

package.json

"devDependencies": {
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-transform-regenerator": "^7.12.13",
"@babel/preset-env": "^7.13.12",
"@babel/runtime": "^7.13.10",
"@mdi/js": "^5.9.55",
"@mdi/svg": "^5.9.55",
"@vue/babel-preset-app": "^4.5.12",
"@vue/test-utils": "^1.1.4",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^26.6.3",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^8.1.1",
"css-loader": "^5.2.0",
"eslint-plugin-jest": "^24.3.6",
"husky": "^6.0.0",
"jest": "^26.6.3",
"postcss-loader": "^5.2.0",
"postcss-preset-env": "^6.7.0",
"sass": "^1.32.8",
"sass-loader": "^11.0.1",
"style-loader": "^2.0.0",
"vue-inline-svg": "^2.0.0",
"vue-jest": "^3.0.7",
"vue-loader": "^15.9.6",
"vue-style-loader": "^4.1.3",
"vue-template-compiler": "^2.6.12",
"vuetify-loader": "^1.7.2",
"webpack": "^5.30.0",
"webpack-cli": "^4.6.0",
"webpack-dev-server": "^3.11.2",
"webpack-merge": "^5.7.3"
},
"dependencies": {
"axios": "^0.21.1",
"core-js": "^3.10.0",
"izitoast": "^1.4.0",
"regenerator-runtime": "^0.13.7",
"vue": "^2.6.12",
"vue-axios": "^3.2.4",
"vue-click-outside": "^1.1.0",
"vue-select": "^3.11.2",
"vuelidate": "^0.7.6",
"vuetify": "^2.4.8",
"vuex": "^3.6.2"
},
"jest": {
"transform": {
"\.js$": "babel-jest",
"^.+\.vue$": "vue-jest"
},
"moduleFileExtensions": [
"js",
"json",
"vue"
],
"transformIgnorePatterns": [
"/node_modules/"
],
"moduleNameMapper": {
"common/vue/mixins/": "<rootDir>/__mocks__/jsFileMock.js",
"common/vue/components/ns-servers": "<rootDir>/__mocks__/jsFileMock.js"
}
},

.babelrc

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

}

Answer 1

这通常是一个解析错误，您必须告诉Jest您希望如何解析测试文件及其依赖项。为了正确地帮助您，我需要查看您的jest.config文件(或您的package.json，具体取决于您决定在哪里设置您的jest实现(。

以下是一些基本设置来指导您：

// .babelrc
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"esmodules": true
}
}
],
"vue"
]
}

// package.json
{
"jest": {
"moduleFileExtensions": ["js", "json", "vue"],
"transform": {
"^.+\.js$": "babel-jest",
"^.+\.vue$": "vue-jest"
}
}
}

记得安装第一个npm install -D babel-preset-vue

祝你今天愉快！