如何使用 component in slot 与 Cypress 和 Vue 进行组件测试？答案

【问题标题】：How to use component in slot for component testing with Cypress and Vue?如何使用 component in slot 与 Cypress 和 Vue 进行组件测试？
【发布时间】：2023-02-06 18:14:18
【问题描述】：

我需要使用 Vue 使用 Cypress 组件测试在插槽中导入一个组件。

文档说对于插槽：

import DefaultSlot from './DefaultSlot.vue'

describe('<DefaultSlot />', () => {
  it('renders', () => {
    cy.mount(DefaultSlot, {
      slots: {
        default: 'Hello there!',
      },
    })
    cy.get('div.content').should('have.text', 'Hello there!')
  })
})

我想这样做：

<DefaultSlot>
 <AnotherSlot />
</DefaultSlot>

【问题讨论】：

标签： javascript vue.js testing cypress

【解决方案1】：

为了解决我的问题，我使用组件选项导入了组件，例如：

import DefaultSlot from './DefaultSlot.vue'
import AnotherSlot from './AnotherSlot.vue'

describe('<DefaultSlot />', () => {
  it('renders', () => {
    cy.mount(DefaultSlot, {
      components: {
        AnotherSlot
      }
      slots: {
        default: '<AnotherSlot label="my label" />',
      },
    })
    cy.get('div.content').should('have.text', 'Hello there!')
  })
})

【讨论】：