Skip to main content

Svelte Examples

info
What you'll learn​
  • How to mount a Svelte component
  • How to pass props to a Svelte component
  • How to test event handlers in a Svelte component
  • How to access the component instance in a test

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

Contents