javascript - 如何使用 Cypress 和 Vue 中的组件进行组件测试？

Question

我需要使用 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>

Answer 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!')
  })
})