如何在Ionic VueJs中测试Ionic组件的disabled属性？

我有一个基于VueJs 3构建的Ionic 7应用，正在使用vue-test-utils和Vitest编写测试。

模板代码：

<ion-segment>
  <ion-segment-button ref="map-segment" class="map" value="/tabs/tab3" :disabled="isDisabled">
    <ion-label>Map</ion-label>
  </ion-segment-button>
</ion-segment>

其中isDisabled默认设置为false。

测试代码：

import { mount } from '@vue/test-utils'
import TabsPage from '@/views/TabsPage.vue'
import { describe, expect, test } from 'vitest'
import { createTestingPinia } from '@pinia/testing'
import { IonicVue, IonSegmentButton } from '@ionic/vue';

describe('TabsPage.vue', () => {
  test('renders TabsPage', () => {
    const wrapper = mount(TabsPage, {
      global: {
        plugins: [createTestingPinia(), IonicVue]
      },
    })  

    const segments = wrapper.findAllComponents(IonSegmentButton)
    expect(segments).toHaveLength(1) // 断言通过

    const mapTab = wrapper.findComponent({ ref: 'map-segment' })

    console.log(mapTab)    
  })
})

我想要测试ion-segment-button组件是否处于禁用状态。实际DOM中该组件带有segment-button-disabled类，但测试中只能看到自定义的map类，无法检测到Ionic自动添加的类。尝试访问shadow-root直接测试按钮的disabled属性，但未找到相关方法。请问如何在VueJs中测试Ionic组件的属性？

方法1：直接断言组件的Props（推荐） #

Ionic组件的状态由传入的Props控制，直接验证组件的disabled Prop值是最可靠的方式，无需依赖DOM渲染出的类或Shadow DOM内容：

test('map segment button disabled state matches isDisabled', () => {
  // 测试禁用状态
  const wrapper = mount(TabsPage, {
    global: {
      plugins: [createTestingPinia(), IonicVue]
    },
    data() {
      return {
        isDisabled: true
      }
    }
  })

  const mapTab = wrapper.findComponent({ ref: 'map-segment' })
  // 断言组件的disabled prop值
  expect(mapTab.props('disabled')).toBe(true)

  // 测试启用状态
  wrapper.setData({ isDisabled: false })
  expect(mapTab.props('disabled')).toBe(false)
})

方法2：访问Shadow DOM验证实际DOM状态 #

如果需要验证Ionic组件内部的真实DOM状态（比如按钮是否真的被禁用），可以通过组件的element.shadowRoot访问其Shadow DOM内容：

test('map segment button has correct disabled state in shadow DOM', () => {
  const wrapper = mount(TabsPage, {
    global: {
      plugins: [createTestingPinia(), IonicVue]
    },
    data() {
      return {
        isDisabled: true
      }
    }
  })

  const mapTabComponent = wrapper.findComponent({ ref: 'map-segment' })
  // 获取组件的Shadow Root
  const shadowRoot = mapTabComponent.element.shadowRoot
  
  // 找到Shadow DOM内部的按钮元素
  const innerButton = shadowRoot.querySelector('button')
  
  // 断言按钮的disabled属性
  expect(innerButton.disabled).toBe(true)
  // 也可以断言Ionic自动添加的禁用类
  expect(innerButton.classList.contains('segment-button-disabled')).toBe(true)
})

注意事项 #

• 测试环境中Ionic组件的样式类可能和生产环境存在差异，优先使用断言Props的方式更稳定。
• 如果使用Pinia管理isDisabled状态，需要在测试中模拟对应的store状态，而非直接修改组件data。

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