Vue-Test-Utils(Vitest)无法识别Nuxt useRouter为函数的问题

你的问题核心在于Vue Test Utils本身不支持Nuxt专属的组合式函数，useRouter这类函数依赖Nuxt的运行时上下文才能正常工作，直接用Vue Test Utils的mount挂载组件时，没有提供对应的上下文环境，导致调用useRouter时触发错误。

正确解决方案：使用Nuxt官方测试工具 #

Nuxt提供了@nuxt/test-utils，专门用于测试Nuxt应用，它会自动搭建好Nuxt的运行时环境，处理别名解析和组合式函数的上下文注入问题。

步骤1：安装依赖 #

npm install -D @nuxt/test-utils vitest

步骤2：修改vitest.config.js #

无需手动配置#imports别名，Nuxt测试工具会自动处理所有Nuxt专属别名：

import { defineVitestConfig } from '@nuxt/test-utils/config'

export default defineVitestConfig({
  test: {
    globals: true,
    environment: 'jsdom',
    coverage: {
      provider: 'c8',
      reporter: ['text', 'json', 'html']
    }
  }
})

步骤3：更新测试代码 #

使用Nuxt测试工具提供的异步mount方法，它会确保组件在正确的Nuxt上下文中被挂载：

import { describe, it, expect } from 'vitest'
import { mount } from '@nuxt/test-utils/runtime'

import AppNavbar from './AppNavbar.vue'

describe('AppNavbar', () => {
  it('renders', async () => {
    const wrapper = await mount(AppNavbar)
    expect(wrapper.vm).toBeTruthy()
  })
})

备选方案：手动模拟useRouter #

如果不想引入Nuxt测试工具，也可以通过Vitest的vi.mock手动模拟useRouter的实现：

import { describe, it, expect, vi } from 'vitest'
import { mount } from '@vue/test-utils'

import AppNavbar from './AppNavbar.vue'

// 模拟#imports模块中的useRouter函数
vi.mock('#imports', () => ({
  useRouter: () => ({
    // 按需模拟你需要的路由方法，比如push、back等
    push: vi.fn()
  })
}))

describe('AppNavbar', () => {
  const wrapper = mount(AppNavbar)

  it('renders', () => {
    expect(wrapper.vm).toBeTruthy()
  })
})

为什么之前的配置无效？ #

你手动配置#imports别名指向的是Nuxt运行时的composables文件，但这个文件里的useRouter是依赖Nuxt上下文的——只有在Nuxt应用运行时，相关上下文才会被注入。直接在Vue Test Utils的独立环境中调用它，会因为缺少必要的上下文而无法正确初始化，最终抛出useRouter is not a function的错误。

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