Vue3+Vuetify组件测试中props传递的正确方式及问题解决

针对你遇到的两个错误，下面给出具体原因和解决办法：

错误原因分析 #

1. h(CompanyBioPanel, { props: { companyData } })报错：Vue3的h（createVNode）函数中，props不需要嵌套在props字段里，直接放在第二个参数的顶层即可。这种写法导致组件根本没接收到companyData，自然会出现读取company_id时的undefined错误。

2. h(CompanyBioPanel, { companyData })报错：核心问题是测试环境未正确初始化Vuetify。v-tabs、v-window这类Vuetify组件依赖全局Vuetify实例提供的上下文和样式支持，缺少时会触发内部状态异常，出现把数字当作对象处理的错误。另外也要检查companyData的结构是否完全符合组件props定义，避免字段类型不匹配。

正确的测试写法（推荐使用@vue/test-utils） #

测试Vuetify组件必须先在测试环境中注册Vuetify插件，再通过mount函数传递props：

import { mount } from '@vue/test-utils'
import CompanyBioPanel from '@/components/CompanyBioPanel.vue'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

// 初始化Vuetify实例
const vuetify = createVuetify({ components, directives })

// 模拟符合要求的companyData
const mockCompanyData = {
  company_id: '1001',
  // 补充组件需要的其他字段
}

test('CompanyBioPanel渲染正确', () => {
  const wrapper = mount(CompanyBioPanel, {
    global: {
      // 全局注册Vuetify插件
      plugins: [vuetify]
    },
    // 直接传递props
    props: {
      companyData: mockCompanyData
    }
  })

  // 示例断言：检查子组件是否渲染
  expect(wrapper.findComponent({ name: 'CompanyDataItem' }).exists()).toBe(true)
})

若必须使用h函数渲染 #

如果是在自定义渲染场景中使用h函数，需要确保Vue应用实例已安装Vuetify：

import { createApp, h } from 'vue'
import { createVuetify } from 'vuetify'
import CompanyBioPanel from '@/components/CompanyBioPanel.vue'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

const vuetify = createVuetify({ components, directives })
const mockCompanyData = { company_id: '1001' }

// 创建应用并安装Vuetify
const app = createApp({
  render: () => h(CompanyBioPanel, { companyData: mockCompanyData })
})
app.use(vuetify)
app.mount('#test-container')

额外注意事项 #

• 确保mockCompanyData的结构、字段类型完全匹配组件中companyData的props定义，比如组件是否要求companyData为必填对象，是否有默认值。
• 优先使用@vue/test-utils的mount/shallowMount函数进行组件测试，它们会自动处理组件上下文和插件注册，比直接用h函数更可靠。

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