Jest 在测试 Vue 单文件组件时遇到意外标记

Question

我有一个带有单文件组件的 vue 应用程序，我想添加单元测试来测试组件。我尝试使用此处描述的笑话，但我不断收到错误“笑话遇到意外令牌”，并包含以下详细信息：

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

经过一些研究（例如，来自此处），我认为这可能是因为需要 .js 文件，但 .vue 单文件组件中包含 html、javascript 和 css，通常由 webpack 和 vue-loader 处理。我尝试遵循各种教程中的 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"
    ]
  }
}

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

编辑：我已经研究过这个问题，我不相信那里的答案可以解决我的问题，因为我试图导入的是 .vue 文件而不是 .html 文件。

编辑2：我有一种感觉，jest 在某种程度上只是没有接受转换，因为从 package.json 中删除它们不会改变任何东西。

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

Answer 1

事实证明，我的问题的解决方案有点反气候。

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

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