Vue Jest Invalid or unexpected token - vue.js

Question

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?

Answer 1

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.