Vitest+Vue2测试中如何正确引入第三方库？

以下是排查和解决的具体步骤：

1. 确认Vitest配置中的setupFiles路径与环境配置正确 #

检查你的vitest.config.js（或vitest.config.ts），确保配置项符合要求：

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

export default defineConfig({
  plugins: [vue()],
  test: {
    setupFiles: ['./src/test/initial.js'], // 路径需相对项目根目录
    environment: 'jsdom', // 必须配置为jsdom，Vue组件测试依赖DOM环境
    // 其他测试配置...
  }
})

核心点：Vitest默认测试环境是node，而Vue组件测试需要DOM环境支撑，未显式设置environment: 'jsdom'会导致全局注册的组件无法正常生效。

2. 验证setup文件的注册逻辑 #

确保src/test/initial.js中的代码正确执行全局注册：

// src/test/initial.js
import Vue from 'vue'
import PortalVue from 'portal-vue'

Vue.use(PortalVue)

// 可添加日志确认文件是否被执行
console.log('PortalVue全局注册完成')

运行测试时查看控制台，若未看到这条日志，说明setup文件路径配置错误，需修正路径。

3. 测试文件中手动注册（用于验证或临时修复） #

如果全局注册仍不生效，可在单个测试文件中手动注册PortalVue，验证组件能否正常渲染：

// YourComponent.spec.js
import { mount } from '@vue/test-utils'
import Vue from 'vue'
import PortalVue from 'portal-vue'
import YourComponent from '@/components/YourComponent.vue'

Vue.use(PortalVue)

describe('YourComponent', () => {
  it('渲染时无portal-target警告', () => {
    const wrapper = mount(YourComponent)
    expect(wrapper.exists()).toBe(true)
  })
})

若此方式能解决警告，说明全局setup的执行时机或配置存在问题，需回到第一步重新检查Vitest配置。

4. 排查Vue实例隔离问题 #

如果测试代码中自定义了Vue实例（而非使用@vue/test-utils的mount/shallowMount），需确保该实例使用已注册PortalVue的Vue构造函数，或局部注册组件：

const app = new Vue({
  components: {
    PortalTarget: require('portal-vue').PortalTarget
  },
  render: h => h(YourComponent)
})

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