Vitest测试Vue组件报错：Cannot read properties of null (reading 'createComment')

1. 启用DOM环境模拟 #

TypeError: Cannot read properties of null (reading 'createComment') 是因为测试环境未模拟浏览器DOM，需要在Vitest配置中启用jsdom：

在vitest.config.ts或vite.config.ts中添加配置：

import { defineConfig } from 'vitest/config'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  test: {
    environment: 'jsdom', // 启用jsdom模拟浏览器环境
    globals: true // 可选：启用describe、it等全局测试API
  }
})

同时安装依赖：

npm install -D jsdom

2. 处理Symbol(v-scx)注入缺失 #

这个符号是组件依赖的内部注入标识（通常来自第三方UI库或自定义provide），需要在测试中手动提供对应依赖：

• 如果是依赖第三方组件库，全局注册插件：

  import { config } from '@vue/test-utils'
  import TargetComponentLib from 'your-component-lib' // 替换为实际依赖的组件库
  
  config.global.plugins.push(TargetComponentLib)
  

• 如果是自定义注入，挂载组件时手动提供：

  import { mount } from '@vue/test-utils'
  import PopUp from './PopUp.vue'
  
  mount(PopUp, {
    global: {
      provide: {
        'Symbol(v-scx)': {} // 根据组件实际需求传入对应值
      }
    }
  })
  

3. 修复“缺少模板或渲染函数”警告 #

这个问题大多是组件未被正确编译或导入方式错误：

• 确保Vite的Vue插件已正确配置（第一步已包含），它会自动编译.vue文件
• 测试中直接导入组件，避免使用懒加载/动态导入
• 检查单文件组件的模板部分是否存在语法错误

4. 示例测试文件 #

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

describe('PopUp Component', () => {
  it('渲染正常', () => {
    const wrapper = mount(PopUp, {
      global: {
        provide: {
          'Symbol(v-scx)': {}
        }
      },
      props: {
        // 传入组件所需的props
      }
    })
    expect(wrapper.exists()).toBe(true)
  })
})

describe('ToolTip Component', () => {
  it('鼠标悬停时显示提示', async () => {
    const wrapper = mount(ToolTip, {
      global: {
        provide: {
          'Symbol(v-scx)': {}
        }
      },
      slots: {
        default: 'Hover me'
      }
    })
    await wrapper.trigger('mouseenter')
    expect(wrapper.find('.tooltip-content').exists()).toBe(true)
  })
})

额外排查点 #

• 若组件依赖全局样式，测试中需导入对应样式文件
• 确保第三方依赖版本与生产环境一致
• 若使用Vue Teleport，需提前在测试环境创建目标元素：

  beforeAll(() => {
    const target = document.createElement('div')
    target.id = 'teleport-target'
    document.body.appendChild(target)
  })
  
  afterAll(() => {
    document.body.removeChild(document.getElementById('teleport-target')!)
  })
  

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