Nuxt3使用useFetch后vitest测试失败，请求排查方案

问题根源 #

• Footer组件使用await useFetch，属于async setup函数，Vue规定这类组件必须被<Suspense>包裹才能正常渲染，但测试时直接挂载组件未提供Suspense边界，触发警告。
• Vitest默认环境未集成Nuxt的自动导入机制与运行时配置，导致useRuntimeConfig、useFetch等组合式函数无法被识别，同时组件实例异常（wrapper.vm为空）。

解决步骤 #

1. 测试中为异步组件添加Suspense包裹 #

修改Footer.spec.js，用Suspense组件包裹Footer并等待异步加载完成：

import { mount } from '@vue/test-utils'
import Footer from './Footer.vue'
import { Suspense } from 'vue'

describe('Footer.vue', () => {
  let wrapper

  beforeEach(async () => {
    wrapper = mount(Suspense, {
      slots: {
        default: Footer
      },
      global: {
        stubs: ['nuxt-link'],
        // 模拟Nuxt运行时配置，避免useRuntimeConfig报错
        provide: {
          'nuxt:config': {
            public: {
              STRAPI_URL: 'https://mock-strapi-url.com'
            }
          }
        }
      }
    })
    // 等待Suspense完成异步组件解析
    await wrapper.vm.$nextTick()
  })

  it('is mounted', () => {
    expect(wrapper.findComponent(Footer).exists()).toBe(true)
  })
})

2. 配置Vitest适配Nuxt3环境 #

安装并使用@nuxt/test-utils来处理Nuxt专属的组合式函数与运行时环境：

1. 安装依赖：

npm install -D @nuxt/test-utils vitest

2. 在nuxt.config.ts中添加测试配置：

export default defineNuxtConfig({
  test: {
    environment: 'nuxt',
    // 可添加其他Vitest自定义配置
  }
})

3. 改写测试文件，使用Nuxt测试工具的mount：

import { mount } from '@nuxt/test-utils'
import Footer from './Footer.vue'

describe('Footer.vue', () => {
  let wrapper

  beforeEach(async () => {
    wrapper = await mount(Footer, {
      global: {
        stubs: ['nuxt-link'],
      },
      // 模拟Strapi API响应，避免真实请求
      mocks: {
        $fetch: () => Promise.resolve({ data: { /* 填入模拟的Footer数据 */ } })
      }
    })
  })

  it('is mounted', () => {
    expect(wrapper.findComponent(Footer).exists()).toBe(true)
  })
})

该工具会自动处理Suspense边界、组合式函数自动导入及运行时配置模拟。

3. 模拟useFetch请求避免真实API调用 #

测试时需mockuseFetch的返回，防止调用真实接口：

// 在测试文件顶部添加mock
vi.mock('#app', () => ({
  useFetch: vi.fn(() => Promise.resolve({ data: ref({ /* 模拟返回数据 */ }) }))
}))

额外注意点 #

• 异步组件测试必须等待异步操作完成，因此beforeEach需使用async/await，并配合$nextTick或Suspense的解析等待。
• 使用@nuxt/test-utils后，无需手动导入Nuxt组合式函数，工具会自动处理环境注入。

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