Vue2+TypeScript项目Jest编译尖括号类型断言报错咨询

问题原因 #

Vue单文件组件的<script lang="ts">里用<string>这种尖括号类型断言时，Jest通过vue-jest预编译组件的时候，会把TS的类型断言错当成JSX标签，于是报“Expected corresponding JSX closing tag for ”的错误。换成as string就没问题，因为这是TS专门为JSX环境设计的断言语法。

修复步骤 #

1. 调整Babel配置，正确处理TS语法 #

把@babel/plugin-syntax-typescript换成@babel/preset-typescript，同时明确告诉Babel，Vue组件的脚本部分不是TSX，避免混淆。

修改babel.config.js：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset', // 保留你原来的Vue预设
    [
      '@babel/preset-typescript',
      {
        isTSX: false, // 脚本部分不是TSX，别按JSX解析
        allExtensions: true // 支持.vue文件里的TS代码
      }
    ]
  ],
  plugins: [
    // 删掉@babel/plugin-syntax-jsx和@babel/plugin-syntax-typescript，preset-typescript已经包含语法支持了
  ]
};

2. 给vue-jest加配置，别把脚本里的尖括号当JSX #

在jest.config.js里，配置vue-jest的Babel规则，确保它处理组件脚本时按普通TS处理：

module.exports = {
  // 你的其他配置...
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '^.+\\.tsx?$': 'babel-jest'
  },
  transformIgnorePatterns: ['/node_modules/'],
  moduleFileExtensions: ['vue', 'js', 'json', 'jsx', 'ts', 'tsx', 'node'],
  // 添加这段vue-jest的全局配置
  globals: {
    'vue-jest': {
      babelConfig: {
        presets: [
          '@vue/cli-plugin-babel/preset',
          ['@babel/preset-typescript', { isTSX: false }]
        ]
      }
    }
  }
};

3. 修正tsconfig.json的JSX设置 #

确保TS配置里禁用JSX解析，让<string>被正确识别为类型断言：

{
  "compilerOptions": {
    // 你的其他配置...
    "jsx": "none", // 直接禁用JSX解析
    "allowJsx": false,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.vue",
    "tests/**/*.ts"
  ]
}

4. 检查依赖版本是否兼容 #

确保这些依赖版本匹配Vue2和Jest：

• vue-jest: 用Vue2适配的版本，比如^5.0.0
• @babel/preset-typescript: 版本要和你的babel-core兼容
• jest: 推荐用^26.x版本，这是Vue2项目常用的稳定版本

验证 #

改完配置后，重新跑单元测试：

npm run test:unit

这时候组件里的<string>类型断言应该能正常通过测试，不会再报JSX的错误了。

内容的提问来源于stack exchange，提问作者temps hd