Svelte Examples

Mounting Components

Using cy.mount()

To mount a component with cy.mount(), import the component and pass it to the method:

import { Stepper } from './stepper.svelte'

it('mounts', () => {
  cy.mount(Stepper)
})

Passing Data to a Component

You can pass props to a component by setting props in the options: cy.mount():

it('mounts', () => {
  cy.mount(Stepper, { props: { count: 100 } })
})

Testing Event Handlers

To test emitted events from a Svelte component, we can use access the component instances and use $on method to listen to events raised. We can also pass in a Cypress spy so we can query the spy later for results. In the example below, we listen to the change event and validate it was called as expected:

it('clicking + fires a change event with the incremented value', () => {
  const changeSpy = cy.spy().as('changeSpy')
  cy.mount(Stepper).then(({ component }) => {
    component.$on('change', changeSpy)
  })
  cy.get('[data-cy=increment]').click()
  cy.get('@changeSpy').should('have.been.calledWithMatch', {
    detail: { count: 1 },
  })
})

Accessing the Component Instance

There might be times when you might want to access the component instance directly in your tests. To do so, use .then(), which enables us to work with the subject that was yielded from the cy.mount() command.

cy.mount(Stepper).then(({ component }) => {
  //component is the rendered instance of Stepper
})