Vitest测试中Wrapper无法获取Teleport内容，如何访问组件HTML？

安全阿岳

2026-8-17

解决Component.vue测试中无法获取Slot内容的问题

常见原因及修复方案

1. 误用`shallowMount`代替`mount`

shallowMount是浅渲染模式，只会渲染当前组件的结构，不会解析子组件（此处的Modal）的内部逻辑，导致slot内容被空注释占位。

修复：改用mount进行全渲染，确保Modal的slot内容被正常填充：

import { mount } from '@vue/test-utils'
import Component from './Component.vue'
import Modal from './Modal.vue'

test('渲染所有slot内容', () => {
  const wrapper = mount(Component, {
    components: { Modal } // 显式注册Modal组件
  })
  console.log(wrapper.html()) // 此时能看到header、正文和footer的完整内容
})

2. 未注册Modal组件

如果测试时没有在组件配置中注册Modal，Vue会将其视为普通HTML标签，无法处理内部的slot分发逻辑，导致内容不渲染。

修复：在测试的组件选项中显式注册Modal，或者在测试环境全局注册Modal组件。

3. Modal实际使用了Teleport（控制台输出有Teleport注释）

从你提供的控制台输出来看，Modal可能包含Teleport（代码未体现但输出有相关注释）。Teleport会将内容转移到指定的DOM节点，不会保留在当前组件的wrapper结构里。

修复：直接获取Teleport目标元素的内容，比如目标是body：

test('获取Teleport中的内容', () => {
  mount(Component, {
    components: { Modal }
  })
  console.log(document.body.innerHTML) // 查看被Teleport转移的内容
})

如果Teleport指定了自定义目标（比如#modal-container），可以提前创建目标元素再获取：

test('获取自定义目标的Teleport内容', () => {
  // 创建Teleport目标元素
  const target = document.createElement('div')
  target.id = 'modal-container'
  document.body.appendChild(target)

  const wrapper = mount(Component, {
    components: { Modal }
  })

  console.log(target.innerHTML) // 输出Teleport到该元素的内容
})