求解vue-jest不生效,解析不了<template>标签?

新手上路,请多包涵

我的vue版本是2.6+,使用过程vue-jest没有生效,报错如下:
image.png

/Volumes/data/develop/code/web/xx/xxx-service-tree/src/framework-service-tree/components/HelloWorld.vue:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){<template>                                                                             
 SyntaxError: Unexpected token '<'
      1 | import { shallowMount } from '@vue/test-utils';
    > 2 | import HelloWorld from '../src/framework-service-tree/components/HelloWorld.vue';
        | ^
      3 |
      4 | // describe('EntitySwitch.vue', () => {
      5 | //     // let wrapper;

引入的文件是src目录下,并不是node_modules中的,网上搜索报错都是node_modules下的,这个问题要如何解决
jest.config.js配置如下

module.exports = {
    preset: 'ts-jest/presets/js-with-babel',
    testEnvironment: 'jsdom',
    transformIgnorePatterns: ['node_modules/(?!(sucrase)/)'],
    moduleFileExtensions: ['js', 'ts', 'json', 'vue'],
    transform: {
        '^.+\\.vue$': 'vue-jest', // Vue 2 专用转换器
        '^.+\\.tsx?$': 'ts-jest',
        '^.+\\.js$': 'babel-jest',
    },
    moduleNameMapper: {
        '^@/(.*)$': '<rootDir>/src/$1',
        '\\.(css|less|scss|sass)$': 'identity-obj-proxy', // CSS 模拟处理
    },
    testMatch: ['**/tests/**/*.spec.[jt]s?(x)'],
    setupFilesAfterEnv: ['<rootDir>/tests/jest.setup.ts'],

    // 添加 Vue 2 模板编译器路径
    globals: {
        'vue-jest': {
            templateCompiler: {
                compiler: require('vue-template-compiler'),
            },
        },
    },
    testEnvironmentOptions: {
        customExportConditions: ["node", "node-addons"]
    }
};

.babelrc配置如下

{
    "presets": [
      "@babel/preset-env",
      "@babel/preset-typescript"
    ],
    "plugins": [
      ["@babel/plugin-transform-modules-commonjs"] // Vue 2 需要此插件
    ]
}

package.json增加依赖如下

"@babel/core": "^7.26.10",
"@babel/preset-env": "^7.26.9",
"@babel/preset-typescript": "^7.26.0",
"@types/jest": "^29.5.14",
"@types/jsdom": "^21.1.7",
"@vue/test-utils": "^1.3.6",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^29.7.0",
"jest": "^29.7.0",
"jsdom": "^26.0.0",
"ts-jest": "^29.2.6",
"vue-jest": "^4.0.1",

vue文件如何才能正确添加单测

阅读 201
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题