我在我的单元测试中使用了Vue3和Vue Test Utils，并且成功地到达了这个组件，其中有两个插槽，一个默认值和一个标题（它是从Headless UI的UIDisclosure示例中复制和粘贴的）：

<script setup lang="ts">
import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'

const props = withDefaults(defineProps<{ title?: string }>(), { title: '' })
</script>

<template>
  <div class="flex flex-row flex-wrap">
    <div class="mx-auto w-full rounded-2xl p-2">
      <Disclosure v-slot="{ open }">
        <DisclosureButton
          class="textpurple-900 flex w-full justify-between rounded-lg bg-purple-100 px-4 py-2 text-left text-sm font-medium hover:bg-purple-200 focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75"
        >
          <span data-test="title">
            <slot name="title">{{ props.title }}</slot>
          </span>
          <div :class="open && 'rotate-90 transform'">></div>
        </DisclosureButton>
        <DisclosurePanel class="textsm px-4 pb-2 pt-4 text-gray-500">
          <!-- This is the default slot. -->
          <span data-test="panel">
            <slot />
          </span>
        </DisclosurePanel>
      </Disclosure>
    </div>
  </div>
</template>

我试着用这些规格测试一下：

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

const panelSelector = '[data-test="panel"]'
const titleSelector = '[data-test="title"]'

describe('test the disclosure', () => {
  describe('renders properly', async () => {
    it('passing title as prop', () => {
      const title = 'This is an example title'
      const wrapper = mount(UIDisclosure, {
        props: {
          title
        }
      })

      const content = wrapper.find(titleSelector).text()
      expect(content).toBe(title)
    })

    it('passing title as slot', () => {
      const title = 'This is a slot title'
      const wrapper = mount(UIDisclosure, {
        slots: {
          title: `<span id="slotTitle">${title}</span>`
        }
      })

      const titleContent = wrapper.find(titleSelector)
      expect(titleContent.html()).toContain(title)
      const panelContent = wrapper.findAll(panelSelector)
      expect(panelContent).toHaveLength(0)
    })

    it('using the default panel slot', () => {
      const panel = 'The content of the panel'
      const wrapper = mount(UIDisclosure, {
        slots: {
          default: `<span id="slotTitle">${panel}</span>`
        }
      })

      const titleContent = wrapper.find(titleSelector)
      expect(titleContent.text()).toBe('')
      const panelContent = wrapper.find(panelSelector)
      expect(panelContent.text()).toContain(panel)
    })
  })
})

在最后一个例子中，默认的slot总是空的，wrapper.html()的html输出是：

<div class="flex flex-row flex-wrap">
  <div class="mx-auto w-full rounded-2xl p-2"><button id="headlessui-disclosure-button-5" type="button" aria-expanded="false" data-headlessui-state="" class="textpurple-900 flex w-full justify-between rounded-lg bg-purple-100 px-4 py-2 text-left text-sm font-medium hover:bg-purple-200 focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75"><span data-test="title"></span>
      <div class="">&gt;</div>
    </button>
    <!---->
  </div>
</div>

我做错了什么？我知道在Vue Testing Utils的官方文档中，他们只使用了wrapper.html（）.contains（）示例，但我想测试特定的插槽内容，因为我有很多特定方法的插槽。我想错了？我应该不在乎很多插槽吗？
在这个特定的情况下，从无头UI的披露有一个标题，可以从面板不同，我想单元测试，他们应该是不同的对方和…