获取导入错误vuejs + jest + Vuetify

时间:2018-01-01 14:35:03

标签: vue.js vuejs2 vue-component jest vuetify.js

我在运行单元测试时遇到导入错误

●测试套件无法运行

/Users/aniruddha/works/awsportal_2/node_modules/vuetify/es5/components/VDivider/VDivider.js:3
import Themeable from '../../mixins/themeable';
^^^^^^
SyntaxError: Unexpected token import

  at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:305:17)
  at Object.<anonymous> (src/components/Account.vue:17:67)
  at Object.<anonymous> (test/unit/specs/Account.spec.js:5:16)

这是调试输出

{
  "configs": [
    {
      "automock": false,
      "browser": false,
      "cache": true,
      "cacheDirectory": "/var/folders/7y/_sh8syl163xdy6jfyc7bww8w0000gn/T/jest_dx",
      "clearMocks": false,
      "coveragePathIgnorePatterns": [
        "/node_modules/"
      ],
      "globals": {},
      "haste": {
        "providesModuleNodeModules": []
      },
      "moduleDirectories": [
        "node_modules",
        "/Users/aniruddha/works/awsportal_2"
      ],
      "moduleFileExtensions": [
        "js",
        "json",
        "vue"
      ],
      "moduleNameMapper": [
        [
          "^@/(.*)$",
          "/Users/aniruddha/works/awsportal_2/src/$1"
        ],
        [
          "^vue$",
          "vue/dist/vue.common.js"
        ]
      ],
      "modulePathIgnorePatterns": [],
      "name": "a49c5965915e40b9abc5a5cfedaeeb54",
      "resetMocks": false,
      "resetModules": false,
      "rootDir": "/Users/aniruddha/works/awsportal_2",
      "roots": [
        "/Users/aniruddha/works/awsportal_2"
      ],
      "runner": "jest-runner",
      "setupFiles": [
        "/Users/aniruddha/works/awsportal_2/test/unit/setup.js"
      ],
      "snapshotSerializers": [],
      "testEnvironment": "jest-environment-jsdom",
      "testMatch": [
        "**/__tests__/**/*.js?(x)",
        "**/?(*.)(spec|test).js?(x)"
      ],
      "testPathIgnorePatterns": [
        "/node_modules/"
      ],
      "testRegex": "",
      "testRunner": "/Users/aniruddha/works/awsportal_2/node_modules/jest-jasmine2/build/index.js",
      "testURL": "about:blank",
      "timers": "real",
      "transform": [
        [
          "^.+\\.js$",
          "/Users/aniruddha/works/awsportal_2/node_modules/babel-jest/build/index.js"
        ],
        [
          ".*\\.(vue)$",
          "/Users/aniruddha/works/awsportal_2/node_modules/jest-vue-preprocessor/index.js"
        ]
      ],
      "transformIgnorePatterns": [
        "/node_modules/"
      ],
      "watchPathIgnorePatterns": []
    }
  ],
  "globalConfig": {
    "bail": false,
    "changedFilesWithAncestor": false,
    "collectCoverage": true,
    "collectCoverageFrom": [
      "src/**/*.{js,vue}",
      "!src/main.js",
      "!src/router/index.js",
      "!**/node_modules/**"
    ],
    "coverageDirectory": "/Users/aniruddha/works/awsportal_2/coverage",
    "coverageReporters": [
      "html"
    ],
    "expand": false,
    "listTests": false,
    "mapCoverage": true,
    "maxWorkers": 3,
    "noStackTrace": false,
    "nonFlagArgs": [
      "test/unit/specs"
    ],
    "notify": false,
    "onlyChanged": false,
    "rootDir": "/Users/aniruddha/works/awsportal_2",
    "runTestsByPath": false,
    "testFailureExitCode": 1,
    "testPathPattern": "test/unit/specs",
    "testResultsProcessor": null,
    "updateSnapshot": "new",
    "useStderr": false,
    "verbose": true,
    "watch": false,
    "watchman": true
  },
  "version": "21.2.1"
}
 PASS  test/unit/specs/ConfigRule.spec.js
  ConfigRule.vue
    ✓ component have title (4ms)
    ✓ render template correctly (38ms)

 FAIL  test/unit/specs/Account.spec.js
  ● Test suite failed to run

    /Users/aniruddha/works/awsportal_2/node_modules/vuetify/es5/components/VDivider/VDivider.js:3
    import Themeable from '../../mixins/themeable';
    ^^^^^^
    SyntaxError: Unexpected token import

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:305:17)
      at Object.<anonymous> (src/components/Account.vue:17:67)
      at Object.<anonymous> (test/unit/specs/Account.spec.js:5:16)

Test Suites: 1 failed, 1 passed, 2 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        3.064s
Ran all test suites matching /test\/unit\/specs/i.

=============================== Coverage summary ===============================
Statements   : 0.13% ( 1/775 )
Branches     : 0% ( 0/277 )
Functions    : 0.51% ( 1/198 )
Lines        : 0.14% ( 1/706 )
================================================================================

的package.json

{
  "name": "awsportal_redesigned",
  "version": "1.0.0",
  "description": "POC",
  "author": "Aniruddha Gaikwad <anieruddhad@gmail.com>",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "test": "jest test/unit/specs --coverage",
    "lint": "eslint --ext .vue src test/unit/specs",
    "build": "node build/build.js"
  },
  "dependencies": {
    "vue": "^2.5.3",
    "vue-router": "^3.0.1",
    "vue-session": "^0.9.10",
    "vuelidate": "^0.6.1",
    "vuetify": "^0.17.4",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.26.0",
    "babel-eslint": "^7.1.1",
    "babel-jest": "^21.2.0",
    "babel-loader": "^7.1.1",
    "babel-plugin-add-filehash": "^6.9.4",
    "babel-plugin-dynamic-import-node": "^1.2.0",
    "babel-plugin-module-resolver": "^3.0.0",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-plugin-system-import-transformer": "^3.1.0",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.22.0",
    "chalk": "^2.0.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "eslint": "^3.19.0",
    "eslint-config-airbnb-base": "^11.3.0",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-import-resolver-webpack": "^0.8.3",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-html": "^3.0.0",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-vue": "^4.0.0",
    "eventsource-polyfill": "^0.9.6",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "jest": "^21.2.0",
    "jest-babel-preprocessor": "^0.3.0",
    "jest-cli": "^22.0.4",
    "jest-vue-preprocessor": "^1.3.1",
    "jsdom": "^11.5.1",
    "node-notifier": "^5.1.2",
    "node-sass": "^4.7.2",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "rimraf": "^2.6.0",
    "sass-loader": "^6.0.6",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.1",
    "url-loader": "^0.5.8",
    "vue-jest": "^1.0.2",
    "vue-loader": "^13.3.0",
    "vue-server-renderer": "^2.5.13",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.3",
    "vue-test-utils": "^1.0.0-beta.9",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  },
  "jest": {
    "verbose": true,
    "moduleDirectories": [
      "node_modules",
      "<rootDir>/"
    ],
    "moduleFileExtensions": [
      "js",
      "json",
      "vue"
    ],
    "moduleNameMapper": {
      "^@/(.*)$": "<rootDir>/src/$1",
      "^vue$": "vue/dist/vue.common.js"
    },
    "transform": {
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
      ".*\\.(vue)$": "<rootDir>/node_modules/jest-vue-preprocessor",
      ".*": "<rootDir>/node_modules/babel-jest"
    },
    "setupFiles": [
      "<rootDir>/test/unit/setup"
    ],
    "mapCoverage": true,
    "collectCoverageFrom": [
      "src/**/*.{js,vue}",
      "!src/main.js",
      "!src/router/index.js",
      "!**/node_modules/**"
    ],
    "collectCoverage": true,
    "coverageReporters": [
      "html"
    ],
    "coverageDirectory": "./coverage",
    "unmockedModulePathPatterns": [
      "<rootDir>/node_modules/react"
    ]
  },
  "engines": {
    "node": ">= 4.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

1 个答案:

答案 0 :(得分:1)

问题出在babel配置上。经过不同的帖子后,.babelrc中的以下配置对我有用

{
  "presets": [
    ["env",  {"modules": false}],
    ["stage-2"]
  ],
  "env": {
    "test": {
      "presets": [
        ["env", { "targets": { "node": "current" }}]
      ]
    }
  }
}