{
  "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": "24a73f8a97175663aaffd3b016289fb2a523a4ea",
    "updated_at": "2026-05-14T20:17:33.301Z",
    "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
      }
    ]
  },
  "chunks": [
    {
      "id": "app/component-testing/svelte/examples#what-youll-learn",
      "doc_id": "app/component-testing/svelte/examples",
      "heading": "What you'll learn",
      "heading_level": 5,
      "content_markdown": "##### What you'll learn\n\n*   How to mount a Svelte component\n*   How to pass props to a Svelte component\n*   How to test event handlers in a Svelte component\n*   How to access the component instance in a test\n",
      "section": "app",
      "anchors": [
        "what-youll-learn"
      ],
      "path": "/llm/json/chunked/app/component-testing/svelte/examples.json",
      "token_estimate": 53
    },
    {
      "id": "app/component-testing/svelte/examples#mounting-components",
      "doc_id": "app/component-testing/svelte/examples",
      "heading": "Mounting Components",
      "heading_level": 2,
      "content_markdown": "## Mounting Components\n\n### Using `cy.mount()`\n\nTo mount a component with `cy.mount()`, import the component and pass it to the method:\n\n```\nimport { Stepper } from './stepper.svelte'it('mounts', () => {  cy.mount(Stepper)})\n```\n\n### Passing Data to a Component\n\nYou can pass props to a component by setting props in the options: `cy.mount()`:\n\n```\nit('mounts', () => {  cy.mount(Stepper, { props: { count: 100 } })})\n```\n\n### Testing Event Handlers\n\nTo 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:\n\n```\nit('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)})\n```\n\n### Accessing the Component Instance\n\nThere 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.\n\n```\ncy.mount(Stepper).then(({ component }) => {  //component is the rendered instance of Stepper})\n```\n",
      "section": "app",
      "anchors": [
        "mounting-components"
      ],
      "path": "/llm/json/chunked/app/component-testing/svelte/examples.json",
      "token_estimate": 299
    },
    {
      "id": "app/component-testing/svelte/examples#using-cy-mount",
      "doc_id": "app/component-testing/svelte/examples",
      "heading": "Using cy.mount()",
      "heading_level": 3,
      "content_markdown": "### Using `cy.mount()`\n\nTo mount a component with `cy.mount()`, import the component and pass it to the method:\n\n```\nimport { Stepper } from './stepper.svelte'it('mounts', () => {  cy.mount(Stepper)})\n```\n",
      "section": "app",
      "anchors": [
        "using-cy-mount"
      ],
      "path": "/llm/json/chunked/app/component-testing/svelte/examples.json",
      "token_estimate": 40
    },
    {
      "id": "app/component-testing/svelte/examples#passing-data-to-a-component",
      "doc_id": "app/component-testing/svelte/examples",
      "heading": "Passing Data to a Component",
      "heading_level": 3,
      "content_markdown": "### Passing Data to a Component\n\nYou can pass props to a component by setting props in the options: `cy.mount()`:\n\n```\nit('mounts', () => {  cy.mount(Stepper, { props: { count: 100 } })})\n```\n",
      "section": "app",
      "anchors": [
        "passing-data-to-a-component"
      ],
      "path": "/llm/json/chunked/app/component-testing/svelte/examples.json",
      "token_estimate": 45
    },
    {
      "id": "app/component-testing/svelte/examples#testing-event-handlers",
      "doc_id": "app/component-testing/svelte/examples",
      "heading": "Testing Event Handlers",
      "heading_level": 3,
      "content_markdown": "### Testing Event Handlers\n\nTo 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:\n\n```\nit('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)})\n```\n",
      "section": "app",
      "anchors": [
        "testing-event-handlers"
      ],
      "path": "/llm/json/chunked/app/component-testing/svelte/examples.json",
      "token_estimate": 135
    },
    {
      "id": "app/component-testing/svelte/examples#accessing-the-component-instance",
      "doc_id": "app/component-testing/svelte/examples",
      "heading": "Accessing the Component Instance",
      "heading_level": 3,
      "content_markdown": "### Accessing the Component Instance\n\nThere 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.\n\n```\ncy.mount(Stepper).then(({ component }) => {  //component is the rendered instance of Stepper})\n```\n",
      "section": "app",
      "anchors": [
        "accessing-the-component-instance"
      ],
      "path": "/llm/json/chunked/app/component-testing/svelte/examples.json",
      "token_estimate": 75
    }
  ]
}