Vue项目中如何复用Vitest依赖配置实现测试文件继承

完全可以通过抽离公共配置的方式消除测试文件中的冗余代码，核心思路是把重复的插件初始化、依赖模拟逻辑封装成公共工具函数或全局配置文件，让测试文件直接复用，只编写核心测试逻辑。

1. 创建公共测试配置工具文件 #

在项目的测试目录下（比如tests/setup/）新建一个全局配置文件，比如global-test-utils.ts，把所有公共依赖（Pinia、Vuetify、Router、全局注入服务）的初始化逻辑放在这里，并导出一个封装好的组件挂载函数。

示例代码：

import { mount, type MountOptions } from '@vue/test-utils'
import { createTestingPinia } from '@pinia/testing'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import { createRouter, createMemoryHistory } from 'vue-router'
import type { Component } from 'vue'

// 初始化公共插件实例
const vuetify = createVuetify({ components, directives })
const router = createRouter({
  history: createMemoryHistory(),
  routes: [] // 基础路由可留空，测试文件按需扩展
})

// 公共全局配置（插件、注入服务）
const baseGlobalConfig = {
  plugins: [vuetify, router, createTestingPinia()],
  provide: {
    // 全局注入的服务默认模拟
    apiService: {
      fetchData: vi.fn().mockResolvedValue({ data: 'default mock' })
    }
  }
}

// 封装通用的组件挂载函数，支持合并自定义配置
export function createTestWrapper<T extends Component>(
  component: T,
  customOptions?: MountOptions<T>
) {
  // 深度合并公共配置与自定义配置，自定义配置优先级更高
  const mergedGlobal = {
    ...baseGlobalConfig,
    ...customOptions?.global,
    provide: {
      ...baseGlobalConfig.provide,
      ...customOptions?.global?.provide
    }
  }

  return mount(component, {
    ...customOptions,
    global: mergedGlobal
  })
}

2. 在测试文件中复用公共配置 #

测试文件直接导入上面的createTestWrapper函数，无需重复配置插件，只需要编写核心测试逻辑即可。如果需要覆盖某个依赖的默认模拟（比如某个服务的特定返回值），只需要传入自定义配置即可。

示例测试文件：

import { describe, it, expect, vi } from 'vitest'
import UserProfile from '@/components/UserProfile.vue'
import { createTestWrapper } from '@/tests/setup/global-test-utils'

describe('UserProfile', () => {
  it('渲染用户信息', () => {
    const wrapper = createTestWrapper(UserProfile)
    expect(wrapper.find('.profile-name').text()).toBe('默认用户')
  })

  it('处理自定义接口返回', async () => {
    // 覆盖默认的apiService模拟
    const wrapper = createTestWrapper(UserProfile, {
      global: {
        provide: {
          apiService: {
            fetchData: vi.fn().mockResolvedValue({ data: { name: '测试用户' } })
          }
        }
      }
    })

    await wrapper.vm.loadUserInfo()
    expect(wrapper.find('.profile-name').text()).toBe('测试用户')
  })
})

3. 全局初始化逻辑（可选） #

如果有不需要每个测试文件单独配置的全局逻辑（比如全局mock控制台输出、设置Vue全局属性），可以在Vitest配置中指定全局setup文件：

在vite.config.ts中添加：

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

export default defineConfig({
  plugins: [vue()],
  test: {
    setupFiles: ['./tests/setup/global-setup.ts'],
    // 其他Vitest配置项
  }
})

然后创建tests/setup/global-setup.ts：

import { vi } from 'vitest'

// 全局mock console.error，避免测试时输出无关警告
vi.spyOn(console, 'error').mockImplementation(() => {})
// 可以添加其他全局初始化逻辑，比如设置Vue.prototype.$xxx

这种方式的优势在于：

• 公共依赖集中管理，修改配置只需改动一处
• 测试文件只关注业务逻辑，大幅减少样板代码
• 自定义配置优先级高于公共配置，灵活度不受影响

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