Question

美好的一天！该项目使用 webpack 5，测试本身是在转换之前编写的。 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

祝您有美好的一天！

为什么测试失败并显示错误 SyntaxError: Unexpected token {?

1 个答案: