手动安装 jest & vue test utils - 导入问题答案

【问题标题】：Installing jest & vue test utils manually no - trouble with import手动安装 jest & vue test utils - 导入问题
【发布时间】：2019-09-15 19:31:33
【问题描述】：

我正在尝试在项目中安装 vue-test-utils 和 jest。它是 vue-cli 项目，但我最初运行它时没有设置测试。

它找到了测试，但在 import 语句上失败了。

这是错误。

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

几乎可以肯定这是一件通天化的事情（我认为），但我无法解决。

这里是配置文件。

babel.config.js

module.exports = {
  presets: [
    '@vue/app'
  ]
}

jest.config.js

module.exports = {
  moduleFileExtensions: [
    'js',
    'jsx',
    'json',
    'vue'
  ],
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
    '^.+\\.jsx?$': 'babel-jest',
    "^.+\\.js$": "<rootDir>/node_modules/babel-jest"
  },
  transformIgnorePatterns: [
    '/node_modules/'
  ],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  snapshotSerializers: [
    'jest-serializer-vue'
  ],
  testMatch: [
    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
  ],
  testURL: 'http://localhost/'
}

package.json

{
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test": "jest"
  },
  "dependencies": {
    "core-js": "^2.6.5",
    "vue": "^2.6.10",
    "vue-moment": "^4.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.4.3",
    "@vue/cli-plugin-babel": "^3.6.0",
    "@vue/cli-plugin-eslint": "^3.6.0",
    "@vue/cli-service": "^3.6.0",
    "@vue/test-utils": "^1.0.0-beta.29",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^24.7.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "jest": "^24.7.1",
    "jest-transform-stub": "^2.0.0",
    "node-sass": "^4.11.0",
    "sass-loader": "^7.1.0",
    "vue-jest": "^3.0.4",
    "vue-template-compiler": "^2.5.21",
    "webpack": "^4.30.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

【问题讨论】：

您是否找到过有效的配置？我也在尝试设置单元测试，但遇到了 mocha 和 jest 的问题。最初这是一个 ES6 兼容问题，但后来我遇到了 here 描述的解析器错误。开玩笑说要再跑一次……谢谢。
我做了我不记得我做了什么，将它挖掘出来并发布它
我在 NUXT VueJs 项目中使用 Jest 得到了同样的结果。请问你是怎么解决的？

标签： vue.js vuejs2 jestjs vue-test-utils

【解决方案1】：

好吧，看起来您的 jest 配置中需要 global 部分。我正在使用 vue + ts，所以我的全局变量看起来像这样：

globals: {
    'ts-jest': {
        babelConfig: true
    }
}

【讨论】：