{
  "doc": {
    "id": "app/write-tests/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/write-tests/component-testing/svelte/examples.md",
    "version": "066c46e056f0f322a0670d2d3aa4e6adaebfe717",
    "updated_at": "2026-09-10T13:30:12.426Z",
    "headings": [
      {
        "id": "app/write-tests/component-testing/svelte/examples#svelte-examples",
        "text": "Svelte Examples",
        "level": 1
      },
      {
        "id": "app/write-tests/component-testing/svelte/examples#passing-data-to-a-component",
        "text": "Passing Data to a Component",
        "level": 2
      },
      {
        "id": "app/write-tests/component-testing/svelte/examples#testing-event-handlers",
        "text": "Testing Event Handlers",
        "level": 2
      },
      {
        "id": "app/write-tests/component-testing/svelte/examples#accessing-the-component-instance",
        "text": "Accessing the Component Instance",
        "level": 2
      },
      {
        "id": "app/write-tests/component-testing/svelte/examples#testing-error-states",
        "text": "Testing Error States",
        "level": 2
      },
      {
        "id": "app/write-tests/component-testing/svelte/examples#testing-with-svelte-boundary",
        "text": "Testing with <svelte:boundary>",
        "level": 3
      }
    ]
  },
  "content": {
    "type": "root",
    "children": [
      {
        "type": "heading",
        "depth": 1,
        "children": [
          {
            "type": "text",
            "value": "Svelte Examples"
          }
        ]
      },
      {
        "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'\n\nit('mounts', () => {\n  cy.mount(Stepper)\n})"
      },
      {
        "type": "heading",
        "depth": 2,
        "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', () => {\n  cy.mount(Stepper, { props: { count: 100 } })\n})"
      },
      {
        "type": "heading",
        "depth": 2,
        "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', () => {\n  const onChangeSpy = cy.spy().as('onChangeSpy')\n  cy.mount(Stepper, { props: { onChange: onChangeSpy } })\n  cy.get('[data-cy=increment]').click()\n  cy.get('@onChangeSpy').should('have.been.calledWith', 1)\n})"
      },
      {
        "type": "heading",
        "depth": 2,
        "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 }) => {\n  //component is the rendered instance of Stepper\n})"
      },
      {
        "type": "heading",
        "depth": 2,
        "children": [
          {
            "type": "text",
            "value": "Testing Error States"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "`cy.mount()` is an asynchronous Cypress command: it enqueues the mount and returns immediately, before the component ever renders. When a component throws during render, the error surfaces as an uncaught exception rather than as a synchronous throw."
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "By default Cypress fails the test on any uncaught exception, so to assert on a render error you listen for it with "
          },
          {
            "type": "link",
            "title": null,
            "url": "/llm/markdown/api/cypress-api/catalog-of-events.md#Uncaught-Exceptions",
            "children": [
              {
                "type": "text",
                "value": "`cy.on('uncaught:exception')`"
              }
            ]
          },
          {
            "type": "text",
            "value": " and return `false` to prevent Cypress from failing the test:"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "import UserProfile from './UserProfile.svelte'\n\nit('surfaces a render error', () => {\n  cy.on('uncaught:exception', (err) => {\n    // Assert on the error thrown during render...\n    expect(err.message).to.include('user is required')\n\n    // ...and return false so Cypress does not fail the test.\n    return false\n  })\n\n  cy.mount(UserProfile)\n})"
      },
      {
        "type": "heading",
        "depth": 3,
        "children": [
          {
            "type": "text",
            "value": "Testing with `<svelte:boundary>`"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "The recommended way to render fallback UI in Svelte 5 is "
          },
          {
            "type": "link",
            "title": null,
            "url": "https://svelte.dev/docs/svelte/svelte-boundary",
            "children": [
              {
                "type": "text",
                "value": "`<svelte:boundary>`"
              }
            ]
          },
          {
            "type": "text",
            "value": " with a `failed` snippet. Rather than nesting components through `cy.mount()`, the cleanest approach is a dedicated fixture component that imports the failing component directly, then mount that fixture and assert the fallback is shown:"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "// ErrorBoundary.cy.js\nimport ErrorBoundary from './ErrorBoundary.svelte'\n\nit('displays the fallback UI on error', () => {\n  // <svelte:boundary> renders fallback UI, but it does NOT stop the error from\n  // propagating to Cypress as an uncaught exception. Cypress fails on uncaught\n  // exceptions by default, so we must still suppress that behavior.\n  cy.on('uncaught:exception', (err) => {\n    // Only suppress the specific error we expect.\n    expect(err.message).to.include('I crashed!')\n\n    return false\n  })\n\n  cy.mount(ErrorBoundary)\n\n  cy.get('[data-cy=fallback]').should('contain', 'Something went wrong.')\n})"
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "Where the `ErrorBoundary` fixture wraps the failing component in a `<svelte:boundary>` with a `failed` snippet:"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "<!-- ErrorBoundary.svelte -->\n<script>\n  import ChildWithError from './ChildWithError.svelte'\n</script>\n\n<svelte:boundary>\n  <ChildWithError />\n\n  {#snippet failed(error)}\n  <div data-cy=\"fallback\">Something went wrong.</div>\n  {/snippet}\n</svelte:boundary>"
      }
    ]
  },
  "token_estimate": 676
}