如何在Vue组件及单元测试中引用App树外的HTML元素？

生产环境实现方式 #

在Vue组件里直接用原生DOM API就能访问#quote元素，推荐在mounted钩子（此时DOM已完全挂载）里操作：

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  const quoteElement = document.getElementById('quote')
  if (quoteElement) {
    console.log(quoteElement.textContent) // 输出 "This is it!"
    // 这里可以对元素做任意DOM操作
  }
})
</script>

如果需要响应式监听元素变化，也可以结合watch和nextTick，但绝大多数场景下原生DOM方法就够用。

单元测试失败的原因与修复 #

你的测试用例失败，是因为mount(App)默认只挂载Vue组件本身，不会自动包含index.html里的外部元素。要模拟真实场景，得手动给测试环境的DOM添加外部元素：

方案1：测试前预添加外部元素 #

修改测试代码如下：

import { describe, expect, test, beforeEach } from 'vitest'
import { mount } from '@vue/test-utils'
import App from '@/App.vue'

describe('App', () => {
  beforeEach(() => {
    // 每个测试前创建#quote元素并插入body
    const quoteEl = document.createElement('div')
    quoteEl.id = 'quote'
    quoteEl.textContent = 'This is it!'
    document.body.appendChild(quoteEl)
  })

  test('Simply Render the Page', () => {
    mount(App) 
    
    // 现在可以正常检查外部元素
    expect(document.getElementById('quote').textContent).toContain('This is it!')
  })
})

方案2：指定挂载目标（适合组件需与外部元素交互的场景） #

如果组件需要和外部元素联动，也可以先构建包含外部元素的容器，再把组件挂载进去：

test('Simply Render the Page', () => {
  // 创建包含外部元素的容器
  const container = document.createElement('div')
  container.innerHTML = `
    <div id="app"></div>    
    <div id="quote">This is it!</div>
  `
  document.body.appendChild(container)

  // 将App挂载到容器内的#app节点
  mount(App, {
    attachTo: '#app'
  })

  expect(document.getElementById('quote').textContent).toBe('This is it!')
})

注意事项 #

• 生产环境中操作外部元素前，一定要加存在性判断，避免元素未加载导致报错。
• 单元测试里Vue Test Utils不会自动加载index.html内容，必须手动构建测试所需的DOM结构。

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