Vue 2组件单元测试：如何访问追加到HTML body的DOM元素？

遇到这个问题太正常了——Vuetify的Menu组件默认会通过Portal/Teleport机制把菜单内容挂载到document.body上，完全脱离了组件本身的DOM树，所以wrapper.find()自然找不到它。下面给你几个实用的解决办法：

方法1：直接查询document.body中的元素 #

既然菜单被挂载到了body里，那我们可以直接从全局文档中查询，但要注意处理异步更新——点击按钮后菜单的展开是异步操作，必须等DOM更新完成才能查到：

it('should open menu when button is clicked', async () => {
  const wrapper = mount(AuthenticatedUser, { store, localVue })
  
  // 触发按钮点击事件
  await wrapper.find('.v-btn').trigger('click')
  
  // 等待Vue完成DOM更新
  await wrapper.vm.$nextTick()
  
  // 从body中查找菜单元素（注意类名要匹配你的Vuetify版本，这里用的是新版的v-menu__content）
  const menuElement = document.body.querySelector('.v-menu__content')
  
  // 断言菜单已成功显示
  expect(menuElement).toBeTruthy()
  expect(menuElement.style.display).not.toBe('none')
})

方法2：修改Menu的挂载目标到组件内部 #

Vuetify的Menu提供了attach属性，可以指定菜单挂载的DOM节点，我们可以把它挂载到组件内的一个容器里，这样就能通过wrapper直接访问了：

第一步：修改组件模板 #

给Menu添加attach属性，并在组件内添加对应的容器：

<template>
  <div class="authenticated-user">
    <!-- 触发菜单的按钮 -->
    <v-btn @click="toggleMenu">用户菜单</v-btn>
    
    <!-- 菜单会挂载到这个容器里 -->
    <div class="menu-attach-target"></div>
    
    <v-menu attach=".menu-attach-target">
      <!-- 菜单内容 -->
      <v-list>
        <v-list-item>个人中心</v-list-item>
        <v-list-item>退出登录</v-list-item>
      </v-list>
    </v-menu>
  </div>
</template>

第二步：修改测试代码 #

现在菜单在组件的DOM树范围内了，直接用wrapper.find()就能找到：

it('should open menu when button is clicked', async () => {
  const wrapper = mount(AuthenticatedUser, { store, localVue })
  
  await wrapper.find('.v-btn').trigger('click')
  await wrapper.vm.$nextTick()
  
  // 直接通过wrapper查找菜单元素
  const menu = wrapper.find('.v-menu__content')
  expect(menu.exists()).toBe(true)
})

注意事项 #

• 确认Vuetify类名：不同版本的Vuetify菜单类名可能不同，比如旧版本可能是menu，新版本是v-menu__content，可以通过浏览器开发者工具查看实际类名。
• 必须处理异步：所有涉及菜单显示/隐藏的操作都是异步的，一定要用async/await配合$nextTick，或者使用flushPromises（如果安装了@vue/test-utils的辅助工具）。

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