我的vue版本是2.6+,使用过程vue-jest没有生效,报错如下:
/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文件如何才能正确添加单测