Vitest测试Vue3时插槽使用h()函数触发渲染函数外调用插槽警告

这个警告来自Vue3的运行时检测逻辑：Vue3要求所有插槽函数必须在所属组件的渲染函数执行上下文内调用，才能正常追踪插槽内用到的响应式依赖。
你当前的写法是直接把h()生成的VNode作为根节点传入mount方法，Vue Test Utils（以下简称VTU）在执行挂载时，会在组件正式的渲染流程之外提前调用你传入的插槽函数来收集插槽内容，刚好触发了这条检测规则。测试能正常通过只是因为当前用例的插槽内容没有用到响应式依赖，依赖追踪失效不会影响断言结果，但这种写法本身存在响应式更新不触发的潜在风险。

方案1：使用mount自带的slots配置项（推荐，改动最小） #

不要把插槽写在h()函数的第三个参数里，直接通过mount方法的slots配置项传入插槽内容即可。VTU内部对配置项传入的slots做了适配，会将插槽函数注入到组件的正式渲染流程中调用，从根源避免警告：

import { h } from 'vue'
import { mount } from '@vue/test-utils'
import InputComponent from './InputComponent.vue'
import ButtonComponent from './ButtonComponent.vue'

it('my test', () => {
  const wrapper = mount(InputComponent, {
    props: {
      id: 'test',
      label: 'test',
    },
    slots: {
      'my-slot': () => [
        h(ButtonComponent),
        h(ButtonComponent)
      ]
    }
  })
  expect(wrapper.find('.my-slot-class').exists()).toBe(true)
})

方案2：使用测试包裹组件（适配复杂渲染场景） #

如果你的测试用例里有更复杂的渲染逻辑，不方便直接通过mount配置传参，可以写一个极简的测试专用父组件包裹待测组件，把所有h()渲染逻辑放在父组件的渲染函数内，保证插槽调用符合Vue的运行规则：

import { h, defineComponent } from 'vue'
import { mount } from '@vue/test-utils'
import InputComponent from './InputComponent.vue'
import ButtonComponent from './ButtonComponent.vue'

it('my test', () => {
  const TestWrapper = defineComponent({
    setup() {
      return () => h(InputComponent, {
        id: 'test',
        label: 'test',
      }, {
        'my-slot': () => [
          h(ButtonComponent),
          h(ButtonComponent)
        ]
      })
    }
  })
  const wrapper = mount(TestWrapper)
  expect(wrapper.find('.my-slot-class').exists()).toBe(true)
})

方案3：局部过滤特定警告（仅适用于无响应式依赖的场景） #

如果你的插槽内容完全不涉及响应式数据，确定依赖追踪失效不会影响测试结果，也可以通过配置VTU的警告处理器，局部过滤这条特定警告。注意不要全局屏蔽所有Vue警告，避免漏掉真正的问题：

import { config } from '@vue/test-utils'

// 可放在单测试文件顶部，或vitest全局setup文件中
config.global.config.warnHandler = (msg, vm, trace) => {
  if (msg.includes('invoked outside of the render function')) return
  console.warn(msg, trace)
}

注意：如果插槽内用到了ref、computed等响应式数据，禁止使用这个方案，否则会出现响应式更新不触发的问题，导致测试结果失真。

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