使用Vitest与@nuxt/test-utils时组件测试报模板/脚本缺失错误

问题还原 #

你在使用@nuxt/test-utils/runtime测试带有useFetch和Vuetify的组件时，触发了SyntaxError: At least one <template> or <script> is required in a single file component错误，但你的index.vue明明包含<template>和<script>部分。之前用普通的defineConfig配置Vitest时没有这个问题，换成defineVitestConfig后，手动添加@vitejs/plugin-vue会报错，删掉又触发Vuetify需要先加载Vue插件的错误。

解决步骤 #

1. 移除手动添加的Vue插件 #

defineVitestConfig已经由Nuxt Test Utils自动集成了Vue插件，手动重复添加会导致SFC被多次解析，直接引发冲突错误。

2. 正确配置Vuetify插件 #

修改vitest.config.ts，让Vuetify插件在Nuxt上下文里正确初始化，同时开启组件自动导入：

// vitest.config.ts
import vuetify from 'vite-plugin-vuetify'
import { defineVitestConfig } from '@nuxt/test-utils/config'

export default defineVitestConfig({
  plugins: [
    vuetify({ autoImport: true }) // 自动导入Vuetify组件，无需手动注册
  ],
  test: {
    environment: 'nuxt', // 指定测试环境为Nuxt，自动处理Nuxt相关配置
    globals: true // 可选：让describe、it等测试API全局可用，无需每次导入
  }
})

3. 调整测试文件写法 #

使用Nuxt Test Utils提供的mount方法挂载组件，确保在Nuxt环境中运行测试：

// tests/pages/index.test.ts
import { mount } from '@nuxt/test-utils/runtime'
import Index from '~/pages/index.vue'

describe('首页测试', () => {
  it('能正常渲染Vuetify卡片', async () => {
    const wrapper = await mount(Index)
    expect(wrapper.findComponent({ name: 'VCard' }).exists()).toBe(true)
  })
})

4. 验证依赖版本兼容性 #

确保以下核心包版本匹配：

• nuxt >= 3.x
• @nuxt/test-utils >= 3.x
• vuetify >= 3.x
• vite-plugin-vuetify >= 2.x

问题原因说明 #

Nuxt Test Utils的defineVitestConfig已经帮你配置好了Vue、自动导入、组件转换等核心插件，手动添加@vitejs/plugin-vue会导致SFC被重复解析，打乱原有转换流程，从而出现模板/脚本缺失的错误。而vite-plugin-vuetify需要在Nuxt的插件链中初始化，开启autoImport还能自动导入Vuetify组件，省去手动注册的麻烦。

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