CODEWITHSUNDEEP
javascriptvue.jsunit-testingjestjs
Roman Kopka
Roman Kopka

Reputation: 11

Why tests fail with an error SyntaxError: Unexpected token {?

Good day! The project uses webpack 5, the tests themselves were written before the transition. There is clearly a problem with babel, although the config was written according to jest documentation I tried everything and looked up a lot over the forums and Github, but i couldnt find a solution. everything i try doesnt seem to work. I need help please! Thank you!

({"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" } }]]
    }
}

}

Upvotes: 0

Views: 761

Answers (1)

David Cueter
David Cueter

Reputation: 15

this is usually a parsing error, you have to tell Jest how you want to parse your test files and their dependencies. To help you properly I need to see your jest.config file (or your package.json depending on where you decide to set up your jest implementation).

Here are some basic settings to guide you:

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

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

Remember to install first npm install -D babel-preset-vue

Have a nice day!

Upvotes: 1

Related Questions