Vue3+Vitest+Happy-Dom下挂载依赖clientWidth组件的测试方案

问题场景 #

我们有一个Vue3组件，具备以下特性：

• 模板包含一个ID为workspace的div
• 组件挂载时，onMounted钩子会调用计算尺寸的方法，该方法会读取workspace元素的clientWidth和clientHeight
• 使用vitest+happy-dom+vue-test-utils进行单元测试时，组件挂载失败，抛出错误：TypeError: Cannot read properties of null (reading 'clientWidth')
• 调试发现，即使手动设置document.body的样式和内部div，document.body的尺寸始终为0

选项分析与最优解 #

选项1：保留组件代码，寻找设置clientWidth/clientHeight的方法（最优解） #

happy-dom支持手动触发布局更新来计算元素尺寸，不需要修改业务代码，具体实现步骤如下：

1. 测试中手动设置元素样式并触发布局更新
   happy-dom不会自动计算元素尺寸，需要调用element.updateLayout()来触发尺寸计算。示例测试代码：

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

test('组件可正常挂载并获取正确尺寸', async () => {
  // 先设置body的基础尺寸，避免容器尺寸为0
  document.body.style.width = '1200px'
  document.body.style.height = '900px'
  document.body.updateLayout()

  // 挂载组件
  const wrapper = mount(WorkspaceComponent)

  // 获取workspace元素并设置尺寸
  const workspaceEl = wrapper.find('#workspace').element
  workspaceEl.style.width = '900px'
  workspaceEl.style.height = '600px'
  workspaceEl.updateLayout()

  // 验证组件是否正确处理了尺寸（根据你的组件逻辑调整断言）
  expect(wrapper.vm.workspaceWidth).toBe(900)
})

2. 如果组件使用ref获取元素
   如果组件内是通过ref绑定workspace元素（而非document.getElementById），可以在挂载后直接操作ref对应的元素：

// 组件内代码示例
const workspaceRef = ref(null)
onMounted(() => {
  if (workspaceRef.value) {
    const width = workspaceRef.value.clientWidth
    // ...其他逻辑
  }
})

// 测试代码
const wrapper = mount(WorkspaceComponent)
const workspaceEl = wrapper.vm.$refs.workspace
workspaceEl.style.width = '800px'
workspaceEl.updateLayout()

选项2：更换测试框架/工具（不推荐） #

更换为jsdom等其他DOM模拟工具虽然可能解决尺寸问题，但完全没必要——happy-dom本身支持尺寸计算，只是需要手动触发布局更新，更换工具会增加迁移成本。

选项3：重写组件（不推荐） #

修改组件逻辑来适配测试框架属于本末倒置，业务代码应该专注于功能实现，测试问题应在测试层面解决，无需改动业务逻辑。

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