Jest 在测试 Vue 单文件组件时遇到了意外的令牌答案

【问题标题】：Jest encountered an unexpected token when testing a Vue single file componentJest 在测试 Vue 单文件组件时遇到了意外的令牌
【发布时间】：2020-09-10 09:08:36
【问题描述】：

我有一个带有单个文件组件的 vue 应用程序，我想添加单元测试来测试组件。我正在尝试像here 中描述的那样使用 jest，但我不断收到错误消息“Jest 遇到了意外的令牌”，其中包含以下详细信息：

/some_path/MyRecipe.vue:1
<template>
^

SyntaxError: Unexpected token <

  1 | import { shallowMount } from "@vue/test-utils"
> 2 | import MyRecipe from "../src/components/MyRecipe.vue"
    | ^
  3 | 
  4 | describe('MyRecipe', () => {
  5 |   test('is a Vue instance', () => {

  at Runtime._execModule (node_modules/jest-runtime/build/index.js:1166:56)
  at Object.<anonymous> (__tests__/MyRecipe.test.js:2:1)

经过一些研究（例如来自here），我认为这可能是因为开玩笑期望一个 .js 文件，但是 .vue 单文件组件中包含 html、javascript 和 css，通常由 webpack 和加载器。我尝试按照各种教程中的 jest 配置来使 jest 使用 vue-jest 转换 .vue 文件，但错误仍然存在。这是我的 package.json 文件（删除了不必要的部分）：

{
  "name": "all-recipes ",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    // ...
    "test": "jest"
  },
  "dependencies": {
    // ...
    "core-js": "^3.4.3",
    "vue": "^2.6.10"
    // ...
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.1.0",
    "@vue/cli-plugin-eslint": "^4.1.0",
    "@vue/cli-service": "^4.1.0",
    "@vue/test-utils": "^1.0.3",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^10.0.3",
    "babel-jest": "^26.0.1",
    // ...
    "jest": "^26.0.1",
    "jest-serializer-vue": "^2.0.2",
    "vue-jest": "^3.0.5",
    "vue-template-compiler": "^2.6.10",
    "vue-test-utils": "^1.0.0-beta.11"
  },
  // ...
  "jest": {
    "moduleFileExtensions": [
      "js",
      "json",
      "vue"
    ],
    "transform": {
      ".*\\.,(vue)$": "vue-jest",
      "^.+\\.js$": "babel-jest"
    },
    "snapshotSerializers": [
      "jest-serializer-vue"
    ]
  }
}

知道可能出了什么问题，或者关于如何调试它的一些提示？

编辑：我已经研究了this 问题，但我不相信那里的答案会解决我的问题，因为我要导入的是 .vue 文件而不是 .html 文件。

编辑 2：我觉得 jest 不知何故只是没有接受转换，因为从 package.json 中删除它们不会改变任何东西。

编辑 3：不，jest 正确地使用 vue-jest 进行转换。如果我卸载 vue-jest 并尝试再次运行测试，jest 会抱怨缺少 vue-jest。

【问题讨论】：

这能回答你的问题吗？ Jest + Vue - SyntaxError: Unexpected token <
@JózefPodlecki 不幸的是，没有。在您引用的问题中，尝试导入 .html 文件时出现错误。我不相信创建自定义 html-loader 会解决这个问题，因为 .vue 文件也包含 javascript 和 css。
你有".*\\.,(vue)$": "<rootDir>/node_modules/vue-jest"的任何理由，而不仅仅是".*\\.(vue)$": "vue-jest" as is stated in the docs？
这是我遵循的其他教程之一的建议，是我最初尝试“vue-jest”后尝试的。我现在只是试着把它改回来，以防不时发生变化，但不幸的是，这并没有奏效。
为了排除故障，我会生成一个新的 Vue CLI 项目，包括 Jest（它没有这个问题），然后找出其中的区别（例如，将它与你的项目进行比较）。跨度>

标签： javascript vue.js jestjs

【解决方案1】：

解决我的问题的方法有点反气候。

问题是我识别 .vue 文件的正则表达式字符串是错误的，并且没有选择我的 MyRecipe.vue 文件。因此，vue-jest 没有被用来转换它以供 jest 解释，因此很难理解有问题的文件以非常非 js 的行开头； <template>。有效的正则表达式是^[^.]+.vue$，所以我的package.json 文件的transform 部分变为

{
  // ...
  "jest": {
    // ...
    "transform": {
      "^[^.]+.vue$": "vue-jest",
      "^.+\\.js$": "babel-jest"
    },
    // ...
  }
}

【讨论】：

【解决方案2】：

前段时间遇到过同样的问题。我发现了什么。

问题出在模板 v-slot 的简短注释中

template(v-slot:body)

它可以编译，但是 Jest 抛出一个错误

Jest 遇到了意外的令牌

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.

我有两种方法可以解决这个问题：

像这样编辑我的 jest.config.js

globals: {
  'vue-jest': {
    pug: {
      doctype: 'html',
    },
  },
},

像这样写一个完整的笔记 template(v-slot:body="")

【讨论】：

【解决方案3】：

对我有用的是将vue-jest 的转换更改为文档中显示的内容。 https://github.com/vuejs/vue-jest

所以尝试使用"^.+\\.vue$": "vue-jest" 而不是"^[^.]+.vue$": "vue-jest" 完整配置可能如下所示

{
  "jest": {
    "moduleFileExtensions": ["js", "json", "vue"],
    "transform": {
      "^.+\\.js$": "babel-jest",
      "^.+\\.vue$": "vue-jest"
     }
   }
}

【讨论】：

【解决方案4】：

我遇到了同样的问题，尝试了很多解决方案，但没有一个有效..以下是我的解决方法

检查包 json 是否有以下 dev 依赖项和 jest 配置

 "devDependencies": {
     "babel-jest": "^23.6.0",
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-plugin-unit-jest": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
     "@vue/eslint-config-airbnb": "^5.0.2",
     "@vue/test-utils": "^1.0.3",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-vue": "^6.2.2",
       },

  "jest": {
     "moduleFileExtensions": [
     "js",
     "jsx",
     "json",
     "vue"
    ],
  "transform": {
    "^.+\\.vue$": "vue-jest"
    },
 "moduleNameMapper": {
   "^@/(.*)$": "<rootDir>/src/$1"
  },
"snapshotSerializers": [
   "jest-serializer-vue"
 ],
"testMatch": [
   "**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*. 
(js|jsx|ts|tsx)"
 ],
 "testURL": "http://localhost/"
 }

检查 babel.config.js

  module.exports = {
    presets: [
    '@vue/cli-plugin-babel/preset',
  ],
 };

检查 jest.config.js

  module.exports = {
   preset: '@vue/cli-plugin-unit-jest',
  };

【讨论】：

【解决方案5】：

您需要安装 vue-jest (https://github.com/vuejs/vue-jest) 与

npm install -D @vue/vue3-jest

这里是可用的版本及其对应的 vue 和 jest 版本

Vue version	Jest Version	Package
Vue 2	Jest <= 26	vue-jest@4
Vue 3	Jest <= 26	vue-jest@5
Vue 2	Jest 27	@vue/vue2-jest
Vue 3	Jest 27	@vue/vue3-jest

然后，您只需更新您的 jest 配置（例如在 jest.config.ts 中）并添加一个 transform section

"transform": {
    "^.+\\.vue$": "@vue/vue3-jest"
}

警告：请务必使用符合您需要的 vue-jest 包更新 npm install 和 jest.config.ts！

【讨论】：