CODEWITHSUNDEEP
vue.jscypressvuejs3
Francisco Barros
Francisco Barros

Reputation: 319

Issue testing components with Slots with Vue and Cypress

I am new to component testing and Cypress. I have been following the official documentation and examples to do some basic component testing on my project. Eventually, I stumbled upon a case where I wanted to test a simple component I wrote which accepts a single slot (default) and since it was awfully similar to an example provided in the @cypress/vue repository, I took the liberty to copy the code and adjust it to my liking.

However, while the first test passes and mounts without issue, when I try to mount the component being tested passing it a default slot, I get a type error with Cannot convert undefined or null to object. Since then, I went through Vue and Vue-Testing examples and I do not seem to figure out what I am doing wrong when invoking the mount function. Below are my code snippets for the souls who can help me on this one.

BaseButton

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

Here is the official example I based the code on.

Upvotes: 3

Views: 1739

Answers (2)

Clarance Liberiste Ntwari
Clarance Liberiste Ntwari

Reputation: 4067

You can also simplify it


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

Upvotes: 3

icube
icube

Reputation: 2798

You can try the following:

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

Upvotes: 6

Related Questions