使用Vitest进行Vue单元测试时遇模板/脚本缺失错误排查

问题现象 #

执行Vue组件单元测试时，Vitest抛出如下错误：

FAIL  tests/unit/components/MyComponent.spec.js [ tests/unit/components/MyComponent.spec.js ]
SyntaxError: At least one <template> or <script> is required in a single file component.

实际组件代码中已包含<template>和<script>标签，且组件能在网页正常渲染，排除组件本身问题后，锁定为Vitest配置异常导致。

出现问题的Vitest配置 #

export default mergeConfig(
  viteConfig,
  defineConfig({
    plugins: [Vue()],
    test: {
      globals: true,
      environment: 'jsdom',
      exclude: [...configDefaults.exclude, 'e2e/*', 'packages/template/*'],
      root: fileURLToPath(new URL('./', import.meta.url)),
      transformMode: {
        web: [/\.[jt]sx$/]
      }
    },
    root: '.'
  })
)

临时解决方案 #

移除配置中plugins数组内的Vue()插件，修改后配置如下：

export default mergeConfig(
  viteConfig,
  defineConfig({
    plugins: [], // 移除Vue()
    test: {
      globals: true,
      environment: 'jsdom',
      exclude: [...configDefaults.exclude, 'e2e/*', 'packages/template/*'],
      root: fileURLToPath(new URL('./', import.meta.url)),
      transformMode: {
        web: [/\.[jt]sx$/]
      }
    },
    root: '.'
  })
)

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