Jestjs Jest失败，SyntaxError:意外标记{

我正在使用vue测试utils（遵循Edd Yerburgh的新书）将jest集成到我的nuxt应用程序中

测试失败的原因是“SyntaxError:Unexpected token{”。类似的代码可以用nuxt生成，测试用Ava运行。我假设我的jest配置有问题

我已经包括了我的package.json、代码摘录和控制台输出

谢谢你的帮助

丹

npm 6.4.0

package.json

{
  "name": "cxl-ui-base",
  "version": "1.0.0",
  "description": "Base UI for SA and CXL",
  "author": "Dan Mahoney <dan.mahoney@contextlabs.com>",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "test:coverage": "TEST=unit nyc --report-dir=generated-files/coverage ava --tap | tap-summary",
    "test:unit": "NODE_ENV=testing jest --verbose --no-cache",
    "test:watch": "NODE_ENV=pro ava --watch",
    "lint": "eslint -f node_modules/eslint-detailed-reporter/lib/detailed.js --ext .js,.vue -o generated-files/lint.html .",
    "doc": "jsdoc -c doc.conf.js"
  },
  "dependencies": {
    "@nuxtjs/auth": "^4.5.1",
    "@nuxtjs/axios": "^5.3.1",
    "@nuxtjs/dotenv": "^1.1.1",
    "ava-describe": "^2.0.0",
    "axios": "^0.18.0",
    "body-parser": "^1.18.3",
    "dotenv": "^5.0.1",
    "eslint-import-resolver-alias": "^1.1.1",
    "express": "^4.16.3",
    "jsdoc-vue": "^1.0.0",
    "jsonwebtoken": "^8.2.1",
    "leaflet": "^1.3.1",
    "lodash": "^4.17.10",
    "moment": "^2.22.1",
    "npm": "^6.4.0",
    "nuxt": "1.4.1",
    "nuxt-leaflet": "0.0.10",
    "nuxt-material-design-icons": "^1.0.4",
    "oauth-1.0a": "^2.2.4",
    "vue": "^2.5.16",
    "vue-d3": "^0.1.0",
    "vue-i18n": "^7.6.0",
    "vue-uuid": "^1.0.0",
    "vue2-leaflet": "^1.0.2",
    "vuelidate": "^0.7.2",
    "vuetify": "^1.0.17",
    "vuex": "^3.0.1",
    "webpack-node-externals": "^1.7.2"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0-rc.2",
    "@vue/test-utils": "^1.0.0-beta.19",
    "ajv": "^6.5.0",
    "babel-eslint": "^7.2.3",
    "babel-jest": "^23.4.2",
    "babel-plugin-add-module-exports": "^0.3.3",
    "babel-plugin-transform-imports": "^1.4.1",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-2": "^6.24.1",
    "babel-preset-vue-app": "^2.0.0",
    "chromedriver": "^2.38.3",
    "eslint": "^4.3.0",
    "eslint-config-airbnb-base": "^12.1.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-detailed-reporter": "^0.7.3",
    "eslint-import-resolver-webpack": "^0.9.0",
    "eslint-loader": "^1.9.0",
    "eslint-plugin-html": "^4.0.3",
    "eslint-plugin-import": "^2.12.0",
    "eslint-plugin-jsdoc": "^3.7.1",
    "eslint-plugin-leon-require-jsdoc": "0.0.1",
    "eslint-plugin-node": "^5.2.1",
    "eslint-plugin-promise": "^3.7.0",
    "eslint-plugin-standard": "^3.1.0",
    "eslint-plugin-vue": "^4.5.0",
    "eslint-plugin-vue-a11y": "0.0.26",
    "jest": "^23.5.0",
    "jest-vue-preprocessor": "^1.4.0",
    "jsdoc": "^3.5.5",
    "jsdom": "^11.11.0",
    "jsdom-global": "^3.0.2",
    "loglevel": "^1.6.1",
    "nightwatch": "^0.9.21",
    "npm-merge-driver": "^2.3.5",
    "raf": "^3.4.0",
    "require-extension-hooks": "^0.3.2",
    "require-extension-hooks-babel": "^0.1.1",
    "require-extension-hooks-vue": "^1.0.0",
    "selenium": "^2.20.0",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.1",
    "tap-summary": "^4.0.0",
    "vue-jest": "^2.6.0",
    "vue-loader": "^13.7.2",
    "vue-meta": "^1.5.0",
    "vue-template-compiler": "^2.5.16"
  },
  "jest": {
    "transform": {
      "^.+\\.js$": "babel-jest",
      "^.+\\.vue$": "vue-jest"
    }
  },
  "eslintConfig": {
    "env": {
      "browser": true,
      "node": true,
      "jest": true
    }
  }
}

相关输出

FAIL  src/test/specs/map.spec.js
● Test suite failed to run

Jest encountered an unexpected token

This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

Here's what you can do:
 • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
 • If you need a custom transformation specify a "transform" option in your config.
 • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html

Details:

/Users/dan.mahoney/Projects/cxl-ui-base/src/test/specs/map.spec.js:10
import { shallowMount, createLocalVue } from '@vue/test-utils';
       ^

SyntaxError: Unexpected token {

  at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        1.045s

---

问题是nuxt将babel配置放入nuxt.config.js中。我找到了一个解决方案。它允许您拥有一个.babelrc文件并将其注入nuxt.config.js中。当Jest编译文件进行测试时，它会使用.babelrc.Kudos向作者致敬。

您应该将节点环境设置为测试，然后运行Jest 可以通过将这一行添加到package.json文件中来实现

"scripts": {
  ....
  "test": "NODE_ENV=test jest"
},

"scripts": {
  ....
  "test": "NODE_ENV=test jest"
},