如何在Cypress中测试Vue3带具名插槽的Comment组件？

我有一个Comment组件，它通过具名插槽#buttons渲染一组自定义Button组件（非原生<button>标签）。请问如何在Cypress测试中为该组件挂载这些Button组件？

组件代码示例 #

Comment.vue

<template>
  <slot #buttons></slot>
</template>

Button.vue

<template>
  <button></button>
</template>

解决方案 #

方法1：直接在Cypress挂载时传入插槽内容

使用Cypress的mount方法时，通过slots选项指定具名插槽的内容，直接引入并传入自定义Button组件：

import { h } from 'vue'
import Comment from './Comment.vue'
import Button from './Button.vue'

describe('Comment组件测试', () => {
  it('能正确渲染插槽中的Button组件', () => {
    cy.mount(Comment, {
      slots: {
        // 对应具名插槽#buttons
        buttons: () => h(Button)
        // 如果需要多个Button，可传入数组：
        // buttons: () => [h(Button), h(Button)]
      }
    })

    // 验证Button是否渲染成功
    cy.get('button').should('exist')
  })
})

注：Vue 2环境下请替换h为Vue.createElement，并确保导入Vue实例。

方法2：创建测试专用的包装组件

如果插槽内容较复杂，可创建临时包装组件，在其中使用Comment并传入插槽内容，再挂载这个包装组件：

import Comment from './Comment.vue'
import Button from './Button.vue'

// 定义测试用包装组件
const TestWrapper = {
  components: { Comment, Button },
  template: `
    <Comment>
      <template #buttons>
        <Button />
        <Button />
      </template>
    </Comment>
  `
}

describe('Comment组件测试', () => {
  it('能正确渲染插槽中的多个Button组件', () => {
    cy.mount(TestWrapper)
    
    // 验证两个Button是否渲染成功
    cy.get('button').should('have.length', 2)
  })
})

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