时间戳

首页 > 解决方案 > Jest 在测试 Vue 单文件组件时遇到了意外的令牌

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

问题描述

我有一个带有单个文件组件的 vue 应用程序，我想添加单元测试来测试组件。我正在尝试使用此处描述的 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)

经过一些研究（例如从这里），我认为这可能是因为开玩笑期望一个 .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。

标签： javascriptvue.jsjestjs

解决方案

我的问题的解决方案结果有点反气候。

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

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

推荐阅读