{
  "doc": {
    "id": "app/component-testing/svelte/examples",
    "title": "Svelte Examples",
    "description": "Learn how to test Svelte components with Cypress Component Testing.",
    "section": "app",
    "source_path": "/llm/markdown/app/component-testing/svelte/examples.md",
    "version": "48b03b5502f7aea1d0454750cce208f775403542",
    "updated_at": "2026-05-20T19:00:20.270Z",
    "headings": [
      {
        "id": "app/component-testing/svelte/examples#svelte-examples",
        "text": "Svelte Examples",
        "level": 1
      },
      {
        "id": "app/component-testing/svelte/examples#what-youll-learn",
        "text": "What you'll learn",
        "level": 5
      },
      {
        "id": "app/component-testing/svelte/examples#mounting-components",
        "text": "Mounting Components",
        "level": 2
      },
      {
        "id": "app/component-testing/svelte/examples#using-cy-mount",
        "text": "Using cy.mount()",
        "level": 3
      },
      {
        "id": "app/component-testing/svelte/examples#passing-data-to-a-component",
        "text": "Passing Data to a Component",
        "level": 3
      },
      {
        "id": "app/component-testing/svelte/examples#testing-event-handlers",
        "text": "Testing Event Handlers",
        "level": 3
      },
      {
        "id": "app/component-testing/svelte/examples#accessing-the-component-instance",
        "text": "Accessing the Component Instance",
        "level": 3
      }
    ]
  },
  "content": {
    "type": "root",
    "children": [
      {
        "type": "heading",
        "depth": 1,
        "children": [
          {
            "type": "text",
            "value": "Svelte Examples"
          }
        ]
      },
      {
        "type": "heading",
        "depth": 5,
        "children": [
          {
            "type": "text",
            "value": "What you'll learn"
          }
        ]
      },
      {
        "type": "list",
        "ordered": false,
        "start": null,
        "spread": false,
        "children": [
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "text",
                    "value": "How to mount a Svelte component"
                  }
                ]
              }
            ]
          },
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "text",
                    "value": "How to pass props to a Svelte component"
                  }
                ]
              }
            ]
          },
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "text",
                    "value": "How to test event handlers in a Svelte component"
                  }
                ]
              }
            ]
          },
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "text",
                    "value": "How to access the component instance in a test"
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "type": "heading",
        "depth": 2,
        "children": [
          {
            "type": "text",
            "value": "Mounting Components"
          }
        ]
      },
      {
        "type": "heading",
        "depth": 3,
        "children": [
          {
            "type": "text",
            "value": "Using `cy.mount()`"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "To mount a component with `cy.mount()`, import the component and pass it to the method:"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "import { Stepper } from './stepper.svelte'it('mounts', () => {  cy.mount(Stepper)})"
      },
      {
        "type": "heading",
        "depth": 3,
        "children": [
          {
            "type": "text",
            "value": "Passing Data to a Component"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "You can pass props to a component by setting props in the options: `cy.mount()`:"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "it('mounts', () => {  cy.mount(Stepper, { props: { count: 100 } })})"
      },
      {
        "type": "heading",
        "depth": 3,
        "children": [
          {
            "type": "text",
            "value": "Testing Event Handlers"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "To test emitted events from a Svelte component, we need to pass in a callback for when we increment the stepper. The Stepper component will need to invoke this callback for us. We can also pass in a Cypress spy so we can query the spy later for results. In the example below, we pass in the `onChange` callback handler and validate it was called as expected:"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "it('clicking + fires a change event with the incremented value', () => {  const onChangeSpy = cy.spy().as('onChangeSpy')  cy.mount(Stepper, { props: { onChange: onChangeSpy } })  cy.get('[data-cy=increment]').click()  cy.get('@onChangeSpy').should('have.been.calledWith', 1)})"
      },
      {
        "type": "heading",
        "depth": 3,
        "children": [
          {
            "type": "text",
            "value": "Accessing the Component Instance"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "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."
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "cy.mount(Stepper).then(({ component }) => {  //component is the rendered instance of Stepper})"
      }
    ]
  },
  "token_estimate": 356
}