Vue Jest 无效或意外的令牌

Question

我是 Jest 和 Vue 的新手，但我在其中一个测试中遇到了错误。

错误是：

测试套件无法运行

   /...../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

这是我的 package.json 文件：

"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"
          }
        }
      ]
    ]
  },

我不明白为什么不排除 node_modules，但即使不排除它们，为什么不模拟 .css 文件？

Answer 1

我怀疑问题在于没有从package.json 读取我的配置。

为了验证这一点，我使用了jest --showConfig。确实和package.json不一样。

然后我创建了一个新的配置文件 jest.json 并将 package.json 中的测试脚本更改为 "test": "jest --config jest.json"

这是我的配置内容：

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

还有一些问题，但这是主要问题。