Nuxt 3项目Vitest配置求助：路径别名与Nuxt实例不可用问题

问题1：测试无法识别~/或@/路径别名 #

Vitest默认不会继承Nuxt的路径别名配置，需要手动在Vitest配置文件和TypeScript配置中同步别名：

1. 配置vitest.config.ts
   在项目根目录创建或修改该文件，添加别名映射：

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

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '~/': `${process.cwd()}/`,
      '@/': `${process.cwd()}/`,
    },
  },
  test: {
    environment: 'jsdom', // 测试Vue组件时需要
  },
})

2. 确保tsconfig.json的paths配置正确
   在compilerOptions中添加路径映射：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": ["./*"],
      "@/*": ["./*"]
    }
  }
}

完成后TypeScript和Vitest就能正确解析别名路径。

问题2：测试含Axios的函数时出现Error: Nuxt instance unavailable #

这个错误是因为API函数依赖Nuxt注入的$axios实例，但测试环境未初始化Nuxt上下文，有两种解决方案：

方案一：使用Nuxt官方测试工具初始化环境 #

安装测试依赖：

npm install -D @nuxt/test-utils vitest

在测试文件开头初始化Nuxt测试环境：

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

// 所有测试前初始化Nuxt
await setup({
  nuxtConfig: './nuxt.config.ts', // 指定你的Nuxt配置文件路径
})

describe('API函数测试', () => {
  it('应该正确获取数据', async () => {
    // 此处可正常调用依赖$axios的函数
  })
})

这种方式会启动轻量Nuxt实例，完全模拟项目运行环境。

方案二：Mock Nuxt上下文和Axios实例 #

如果不想启动完整Nuxt环境，直接mock所需依赖：

import { vi } from 'vitest'
import { useNuxtApp } from '#app'
import { yourApiFunction } from '@/utils/api'

// Mock useNuxtApp和$axios
vi.mock('#app', () => ({
  useNuxtApp: vi.fn(() => ({
    $axios: {
      get: vi.fn().mockResolvedValue({ data: { key: 'value' } }),
      // 根据需求mock其他Axios方法（post、put等）
    }
  }))
}))

describe('API函数测试', () => {
  it('应该返回mock的数据', async () => {
    const result = await yourApiFunction()
    expect(result).toEqual({ key: 'value' })
  })
})

这种方式更轻量，适合快速单元测试。

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