為什么測試失敗並出現錯誤 SyntaxError: Unexpected token {?

Question

美好的一天，該項目使用 webpack 5. 測試本身是在轉換之前編寫的，babel 顯然存在問題，盡管配置是根據笑話文檔編寫的，但我嘗試了一切，並在論壇和 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

祝你今天過得愉快！