无法使用Vitest运行Vue组件测试的问题求助

项目配置：

• Vue版本：Vue 3
• 开发服务器：Webpack
• 测试工具：Vitest、Vue Test Utils

可以正常编写并运行简单JavaScript函数的测试，但测试Vue组件时出现以下错误：

src/build/PartSelector.test.js [ src/build/PartSelector.test.js ]
Error: Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.
 ❯ formatError node_modules/vite/dist/node/chunks/dep-bb8a8339.js:44062:46
 ❯ TransformContext.error node_modules/vite/dist/node/chunks/dep-bb8a8339.js:44058:19
 ❯ TransformContext.transform node_modules/vite/dist/node/chunks/dep-bb8a8339.js:41784:22
 ❯ Object.transform node_modules/vite/dist/node/chunks/dep-bb8a8339.js:44352:30
 ❯ loadAndTransform node_modules/vite/dist/node/chunks/dep-bb8a8339.js:55026:29

已执行npm install "@vitejs/plugin-vue"安装了错误提示中的插件，但问题未解决。

需求：无需切换到Vite作为开发服务器的前提下解决该错误，是否需要对@vitejs/plugin-vue进行额外配置？

附当前vitest.config.ts：

import { defineConfig } from "vitest/config";

export default defineConfig({
  test: {
    globals: true,
  },
});

你已经安装了@vitejs/plugin-vue，但还需要在Vitest配置中注册该插件，让Vitest能够识别并解析.vue单文件组件。修改vitest.config.ts如下：

import { defineConfig } from "vitest/config";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [vue()], // 注册Vue插件，用于处理.vue文件
  test: {
    globals: true,
  },
});

这个配置仅在测试环节生效，开发环境依然可以使用Webpack，不需要切换到Vite。配置完成后，Vitest就能通过@vitejs/plugin-vue正确解析Vue组件的语法，解决当前的解析错误。

如果你的项目使用了Vue JSX语法，还可以额外安装并配置@vitejs/plugin-vue-jsx，但当前问题只需要基础的Vue插件即可解决。

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