CODEWITHSUNDEEP
vue.jstestingjestjsbabeljs
optinator
optinator

Reputation: 21

Vue Jest Invalid or unexpected token

I'm new to Jest and Vue, but I'm getting an error in one of my tests.

The error is:

Test suite failed to run

   /...../node_modules/element-ui/lib/theme-chalk/table-column.css:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){@charset "UTF-8";.el-checkbox,.el-checkbox__input{white-space:nowrap;display:inline-block;position:relative}.el-checkbox{color:#606266;font-weight:500;font-size:14px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-right:30px}.el-checkbox.is-bordered{padding:9px 20px 9px 10px;border-radius:4px;border:1px solid #DCDFE6;-webkit-box-sizing:border-box;box-sizing:border-box;line-height:normal;height:40px}.el-checkbox.is-bordered.is-checked{border-color:#409EFF}.el-checkbox.is-bordered.is-disabled{border-color:#EBEEF5;cursor:not-allowed}.el-checkbox.is-bordered+.el-checkbox.is-bordered{margin-left:10px}.el-checkbox.is-bordered.el-checkbox--medium{padding:7px 20px 7px 10px;border-radius:4px;height:36px}.el-checkbox.is-bordered.el-checkbox--medium .el-checkbox__l

    SyntaxError: Invalid or unexpected token

Here's my package.json file:

"jest": {
    "moduleFileExtensions": [
      "js",
      "json",
      "vue"
    ],
    "transform": {
      ".*\\.(vue)$": "vue-jest",
      ".*\\.(js)$": "babel-jest"
    },
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js",
      "^@/(.*)$": "<rootDir>/src/$1"
    },
     "testPathIgnorePatterns": [
      "<rootDir>/(build|docs|node_modules)/*"
    ],
    "testEnvironment": "node"
  },
  "babel": {
    "presets": [
      [
        "@babel/preset-env",
        {
          "targets": {
            "node": "current"
          }
        }
      ]
    ]
  },

I don't understand why node_modules isn't being excluded, but even if they aren't excluded why isn't the .css file being mocked?

Upvotes: 0

Views: 1015

Answers (1)

optinator
optinator

Reputation: 21

I suspected the issue was jest was not reading my config from package.json.

To verify this I used the jest --showConfig. Indeed, it was different from package.json.

I then created a new config file, jest.json and I changed the test script in package.json to be "test": "jest --config jest.json"

This is the contents of my config:

{
    "verbose": true,
    "automock": false,
    "globals": {
      "_Table": {"name": "el-table"},
      "_TableColumn": {"name": "el-table-column"}},
    "moduleFileExtensions": [
      "js",
      "json",
      "vue"
    ],
    "transform": {
      ".*\\.(vue)$": "vue-jest",
      ".*\\.(js)$": "babel-jest"
    },
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js",
      "^@/(.*)$": "<rootDir>/src/$1"
    },
     "testPathIgnorePatterns": [
      "<rootDir>/(build|docs|node_modules)/"
    ]
}

There are a few more issues, but this was the main one.

Upvotes: 1

Related Questions