在用打字稿编写的 vue 项目中使用 vue-test-utils - SyntaxError:Unexpected token '<'

问题描述

我正在尝试在用打字稿编写的 vue 项目中使用 vue-test-utils。我跟着 this guide 并得到错误，'Cannot fint module '../somefile.vue' or its corresponding type declarations.'。我通过注释掉 'tsconfig.json->types' 中的行来修复此错误。之后，我又遇到了另一个错误，如下所示。

Details:

/path/to/HelloWorld.vue:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<template>

 SyntaxError: Unexpected token '<'

...
3 | import HelloWorld from 'HelloWorld.vue';
  | ^
...

.

这些是我当前的配置文件。

tsconfig.json

// tsconfig.json
{
  "compilerOptions": {
    "target": "es2018","module": "esnext","moduleResolution": "node","jsx": "preserve","lib": ["esnext","esnext.asynciterable","dom"],"esModuleInterop": true,"allowJs": true,"sourceMap": true,"experimentalDecorators": true,"strict": true,"noEmit": true,"baseUrl": ".","paths": {
      "~/*": ["./*"],"@/*": ["./*"]
    },//"types": ["jest","@types/node","@nuxt/types"]
  },"exclude": ["node_modules"]
}

jest.config.js 我尝试了其他示例 jest.config.js 文件，但也遇到了同样的错误。

// jest.config.js
module.exports = {
  preset: 'ts-jest/presets/js-with-ts',testEnvironment: 'node',verbose: true,moduleDirectories: ['node_modules','pages'],modulePaths: ['<rootDir>/pages','<rootDir>/node_modules'],modulefileExtensions: ['js','ts','vue','json','node'],transformIgnorePatterns: ['node_modules/(?!(bootstrap-vue)/)'],testPathIgnorePatterns: [
    '/build/','/config/','/data/','/dist/','/node_modules/','/test/','/vendor/'
  ],globals: {
    'ts-jest': {
      tsconfig: './tsconfig.json'
    },NODE_ENV: 'test'
  }
}

package.json

...
"jest": {
    "modulefileExtensions": [
      "js","ts","json","vue"
    ],"transform": {
      ".*\\.(vue)$": "vue-jest","^.+\\.tsx?$": "ts-jest"
    },"testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$"
  }
...

最后，我安装了 @types/jest,@vue/test-utils,jest,ts-jest,vue-jest

还有其他配置文件我应该考虑吗？还是我错过了什么？
任何帮助将不胜感激！ 谢谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）