使用 Vue 和 Cypress 使用 Slots 測試組件

Question

我是組件測試和賽普拉斯的新手。 我一直在按照官方文檔和示例對我的項目進行一些基本的組件測試。 最終，我偶然發現了一個案例，我想測試我編寫的一個簡單組件，它接受一個插槽（ default ），因為它與@cypress/vue存儲庫中提供的示例非常相似，所以我冒昧地復制了代碼並根據我的喜好進行調整。

但是，雖然第一個測試通過並安裝沒有問題，但當我嘗試安裝正在測試的組件時，我收到了一個類型錯誤， Cannot convert undefined or null to object 。 從那時起，我瀏覽了 Vue 和 Vue-Testing 示例，但在調用 mount 函數時我似乎沒有弄清楚我做錯了什么。 下面是我的代碼片段，供那些可以幫助我解決這個問題的人使用。

基本按鈕

<template>
  <a role="button" class="btn btn-primary">
    <slot />
  </a>
</template>

BaseButton.spec.ts

import BaseButton from '@/components/BaseButton.vue'
import { mount } from '@cypress/vue'

describe('BaseButton', () => {
  context('when slots are not passed', () => {
    it('renders nothing', () => {
      mount(BaseButton)
      cy.get('a').should('have.text', '')
    })
  })

  context('when slots are passed', () => {
    it('renders slots', () => {
      mount(BaseButton, {
        slots: {
          default: 'Test Button',
        },
      })

      cy.get('a').should('have.text', 'Test Button')
    })

    it('renders scopedSlots', () => {
      mount(BaseButton, {
        slots: {
          default: '<template #default="props"><p>Yay! {{props.content}}</p></template>',
        },
      })

      cy.contains('Yay! Scoped content!').should('be.visible')
      cy.contains('Nothing used the Scoped content!').should('not.exist')
    })
  })
})

這是我基於代碼的官方示例。

Answer 1

您可以嘗試以下方法：

mount(BaseButton, {
   slots: {
      default: {
          render: () => "Test Button"
      }
   }
})

Answer 2

你也可以簡化它

mount(BaseButton, {
   slots: {
      default:() => "Test Button"
   }
})