如何在Nuxt3中使用Vitest测试含useNuxtApp的组件？

方案一：使用Nuxt官方测试工具（推荐） #

官方的@nuxt/test-utils会自动搭建完整的Nuxt测试上下文，无需手动模拟核心API：

1. 安装依赖：

npm install -D @nuxt/test-utils vitest

2. 在测试文件中配置并执行测试：

import { setup } from '@nuxt/test-utils/vitest'
import { mount } from '@vue/test-utils'
import MyComponent from './MyComponent.vue'

// 初始化Nuxt测试环境，指定需要加载的插件
await setup({
  plugins: ['~/plugins/fmt.ts']
})

test('MyComponent渲染正常', () => {
  const wrapper = mount(MyComponent)
  // 此处可正常断言组件行为，useNuxtApp与$fmt已被正确注入
})

方案二：手动模拟useNuxtApp与$fmt插件 #

若不想引入官方测试工具，可直接用Vitest的mock功能模拟核心API：

import { vi } from 'vitest'
import { mount } from '@vue/test-utils'
import MyComponent from './MyComponent.vue'

// 模拟#app模块中的useNuxtApp，返回包含$fmt的上下文对象
vi.mock('#app', () => ({
  useNuxtApp: vi.fn(() => ({
    $fmt: {
      // 按照组件中实际调用的$fmt方法来模拟，比如你用了$fmt.format：
      format: vi.fn((text) => `格式化后的：${text}`)
    }
  }))
}))

test('MyComponent调用$fmt正常', () => {
  const wrapper = mount(MyComponent)
  // 断言$fmt方法是否被调用，或组件渲染结果是否符合预期
})

注意：手动模拟时，要确保$fmt的模拟方法与组件中实际使用的方法名、参数逻辑匹配，避免无效测试断言。

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