{
  "doc": {
    "id": "app/write-tests/component-testing/svelte/overview",
    "title": "Svelte component testing",
    "description": "Learn how to set up component tests in Svelte, configure Cypress for Svelte projects, and test Svelte components with Vite and a custom Webpack config.",
    "section": "app",
    "source_path": "/llm/markdown/app/write-tests/component-testing/svelte/overview.md",
    "version": "066c46e056f0f322a0670d2d3aa4e6adaebfe717",
    "updated_at": "2026-09-10T13:30:12.426Z",
    "headings": [
      {
        "id": "app/write-tests/component-testing/svelte/overview#svelte-component-testing",
        "text": "Svelte Component Testing",
        "level": 1
      },
      {
        "id": "app/write-tests/component-testing/svelte/overview#tutorial",
        "text": "Tutorial",
        "level": 2
      },
      {
        "id": "app/write-tests/component-testing/svelte/overview#installation",
        "text": "Installation",
        "level": 2
      },
      {
        "id": "app/write-tests/component-testing/svelte/overview#framework-configuration",
        "text": "Framework Configuration",
        "level": 2
      },
      {
        "id": "app/write-tests/component-testing/svelte/overview#svelte-with-vite",
        "text": "Svelte with Vite",
        "level": 3
      },
      {
        "id": "app/write-tests/component-testing/svelte/overview#vite-configuration",
        "text": "Vite Configuration",
        "level": 4
      },
      {
        "id": "app/write-tests/component-testing/svelte/overview#svelte-vite-sample-apps",
        "text": "Svelte Vite Sample Apps",
        "level": 4
      },
      {
        "id": "app/write-tests/component-testing/svelte/overview#svelte-with-webpack",
        "text": "Svelte with Webpack",
        "level": 3
      },
      {
        "id": "app/write-tests/component-testing/svelte/overview#webpack-configuration",
        "text": "Webpack Configuration",
        "level": 4
      },
      {
        "id": "app/write-tests/component-testing/svelte/overview#svelte-webpack-sample-apps",
        "text": "Svelte Webpack Sample Apps",
        "level": 4
      },
      {
        "id": "app/write-tests/component-testing/svelte/overview#see-also",
        "text": "See also",
        "level": 2
      }
    ]
  },
  "chunks": [
    {
      "id": "app/write-tests/component-testing/svelte/overview#installation",
      "doc_id": "app/write-tests/component-testing/svelte/overview",
      "heading": "Installation",
      "heading_level": 2,
      "content_markdown": "## Installation\n\nTo get up and running with Cypress Component Testing in Svelte, install Cypress into your project:\n\n*   npm\n*   Yarn\n*   pnpm\n*   Bun\n\n```\nnpm install cypress --save-dev\n```\n\n```\nyarn add cypress --dev\n```\n\n```\npnpm add --save-dev cypress\n```\n\n```\nbun add --dev cypress\n```\n\nOpen Cypress:\n\n*   npm\n*   Yarn\n*   pnpm\n*   Bun\n\n```\nnpx cypress open\n```\n\n```\nyarn cypress open\n```\n\n```\npnpm cypress open\n```\n\n```\nbunx cypress open\n```\n\nChoose Component Testing\n\nThe Cypress Launchpad will guide you through configuring your project.\n\nFor a step-by-step guide on how to create a component test, refer to the [Getting Started](/llm/markdown/app/component-testing/get-started.md) guide.\n\nFor usage and examples, visit the [Svelte Examples](/llm/markdown/app/component-testing/svelte/examples.md) guide.\n",
      "section": "app",
      "anchors": [
        "installation"
      ],
      "path": "/llm/json/chunked/app/write-tests/component-testing/svelte/overview.json",
      "token_estimate": 159
    },
    {
      "id": "app/write-tests/component-testing/svelte/overview#framework-configuration",
      "doc_id": "app/write-tests/component-testing/svelte/overview",
      "heading": "Framework Configuration",
      "heading_level": 2,
      "content_markdown": "## Framework Configuration\n\nCypress Component Testing works out of the box with [Vite](https://vitejs.dev/), and a custom [Webpack](https://webpack.js.org/) config. Cypress will automatically detect one of these frameworks during setup and configure them properly.\n\nFor a full explanation of how the dev server and bundler work — including automatic config detection and override options — see [Component Testing Configuration — Dev Server and Bundler](/llm/markdown/app/component-testing/component-framework-configuration.md#Dev-Server-and-Bundler).\n\nThe examples below are for quick reference.\n\n### Svelte with Vite\n\nCypress Component Testing works with Svelte apps that use Vite `8.x` as the bundler.\n\n#### Vite Configuration\n\n*   cypress.config.js\n*   cypress.config.ts\n\n```\nconst { defineConfig } = require('cypress')\n\nmodule.exports = defineConfig({\n  component: {\n    devServer: {\n      framework: 'svelte',\n      bundler: 'vite',\n    },\n  },\n})\n```\n\n```\nimport { defineConfig } from 'cypress'\n\nexport default defineConfig({\n  component: {\n    devServer: {\n      framework: 'svelte',\n      bundler: 'vite',\n    },\n  },\n})\n```\n\n#### Svelte Vite Sample Apps\n\n*   [Svelte 5 with Vite and TypeScript](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/svelte-vite-ts)\n\n### Svelte with Webpack\n\nCypress Component Testing works with Svelte apps that use Webpack 5+ as the bundler.\n\n#### Webpack Configuration\n\n*   cypress.config.js\n*   cypress.config.ts\n\n```\nconst { defineConfig } = require('cypress')\nconst webpackConfig = require('./webpack.config')\n\nmodule.exports = defineConfig({\n  component: {\n    devServer: {\n      framework: 'svelte',\n      bundler: 'webpack',\n      // optionally pass in webpack config\n      webpackConfig,\n    },\n  },\n})\n```\n\n```\nimport { defineConfig } from 'cypress'\nimport webpackConfig from './webpack.config'\n\nexport default defineConfig({\n  component: {\n    devServer: {\n      framework: 'svelte',\n      bundler: 'webpack',\n      // optionally pass in webpack config\n      webpackConfig,\n    },\n  },\n})\n```\n\nIf you don't provide one, Cypress will try to infer your webpack config. If Cypress cannot or you want to make modifications to your config, you can pass it in manually via the `webpackConfig` option.\n\n#### Svelte Webpack Sample Apps\n\n*   [Svelte 5 Webpack 5 with Typescript](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/svelte-webpack-ts)\n",
      "section": "app",
      "anchors": [
        "framework-configuration"
      ],
      "path": "/llm/json/chunked/app/write-tests/component-testing/svelte/overview.json",
      "token_estimate": 384
    },
    {
      "id": "app/write-tests/component-testing/svelte/overview#svelte-with-vite",
      "doc_id": "app/write-tests/component-testing/svelte/overview",
      "heading": "Svelte with Vite",
      "heading_level": 3,
      "content_markdown": "### Svelte with Vite\n\nCypress Component Testing works with Svelte apps that use Vite `8.x` as the bundler.\n\n#### Vite Configuration\n\n*   cypress.config.js\n*   cypress.config.ts\n\n```\nconst { defineConfig } = require('cypress')\n\nmodule.exports = defineConfig({\n  component: {\n    devServer: {\n      framework: 'svelte',\n      bundler: 'vite',\n    },\n  },\n})\n```\n\n```\nimport { defineConfig } from 'cypress'\n\nexport default defineConfig({\n  component: {\n    devServer: {\n      framework: 'svelte',\n      bundler: 'vite',\n    },\n  },\n})\n```\n\n#### Svelte Vite Sample Apps\n\n*   [Svelte 5 with Vite and TypeScript](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/svelte-vite-ts)\n",
      "section": "app",
      "anchors": [
        "svelte-with-vite"
      ],
      "path": "/llm/json/chunked/app/write-tests/component-testing/svelte/overview.json",
      "token_estimate": 108
    },
    {
      "id": "app/write-tests/component-testing/svelte/overview#vite-configuration",
      "doc_id": "app/write-tests/component-testing/svelte/overview",
      "heading": "Vite Configuration",
      "heading_level": 4,
      "content_markdown": "#### Vite Configuration\n\n*   cypress.config.js\n*   cypress.config.ts\n\n```\nconst { defineConfig } = require('cypress')\n\nmodule.exports = defineConfig({\n  component: {\n    devServer: {\n      framework: 'svelte',\n      bundler: 'vite',\n    },\n  },\n})\n```\n\n```\nimport { defineConfig } from 'cypress'\n\nexport default defineConfig({\n  component: {\n    devServer: {\n      framework: 'svelte',\n      bundler: 'vite',\n    },\n  },\n})\n```\n",
      "section": "app",
      "anchors": [
        "vite-configuration"
      ],
      "path": "/llm/json/chunked/app/write-tests/component-testing/svelte/overview.json",
      "token_estimate": 68
    },
    {
      "id": "app/write-tests/component-testing/svelte/overview#svelte-with-webpack",
      "doc_id": "app/write-tests/component-testing/svelte/overview",
      "heading": "Svelte with Webpack",
      "heading_level": 3,
      "content_markdown": "### Svelte with Webpack\n\nCypress Component Testing works with Svelte apps that use Webpack 5+ as the bundler.\n\n#### Webpack Configuration\n\n*   cypress.config.js\n*   cypress.config.ts\n\n```\nconst { defineConfig } = require('cypress')\nconst webpackConfig = require('./webpack.config')\n\nmodule.exports = defineConfig({\n  component: {\n    devServer: {\n      framework: 'svelte',\n      bundler: 'webpack',\n      // optionally pass in webpack config\n      webpackConfig,\n    },\n  },\n})\n```\n\n```\nimport { defineConfig } from 'cypress'\nimport webpackConfig from './webpack.config'\n\nexport default defineConfig({\n  component: {\n    devServer: {\n      framework: 'svelte',\n      bundler: 'webpack',\n      // optionally pass in webpack config\n      webpackConfig,\n    },\n  },\n})\n```\n\nIf you don't provide one, Cypress will try to infer your webpack config. If Cypress cannot or you want to make modifications to your config, you can pass it in manually via the `webpackConfig` option.\n\n#### Svelte Webpack Sample Apps\n\n*   [Svelte 5 Webpack 5 with Typescript](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/svelte-webpack-ts)\n",
      "section": "app",
      "anchors": [
        "svelte-with-webpack"
      ],
      "path": "/llm/json/chunked/app/write-tests/component-testing/svelte/overview.json",
      "token_estimate": 184
    },
    {
      "id": "app/write-tests/component-testing/svelte/overview#webpack-configuration",
      "doc_id": "app/write-tests/component-testing/svelte/overview",
      "heading": "Webpack Configuration",
      "heading_level": 4,
      "content_markdown": "#### Webpack Configuration\n\n*   cypress.config.js\n*   cypress.config.ts\n\n```\nconst { defineConfig } = require('cypress')\nconst webpackConfig = require('./webpack.config')\n\nmodule.exports = defineConfig({\n  component: {\n    devServer: {\n      framework: 'svelte',\n      bundler: 'webpack',\n      // optionally pass in webpack config\n      webpackConfig,\n    },\n  },\n})\n```\n\n```\nimport { defineConfig } from 'cypress'\nimport webpackConfig from './webpack.config'\n\nexport default defineConfig({\n  component: {\n    devServer: {\n      framework: 'svelte',\n      bundler: 'webpack',\n      // optionally pass in webpack config\n      webpackConfig,\n    },\n  },\n})\n```\n\nIf you don't provide one, Cypress will try to infer your webpack config. If Cypress cannot or you want to make modifications to your config, you can pass it in manually via the `webpackConfig` option.\n",
      "section": "app",
      "anchors": [
        "webpack-configuration"
      ],
      "path": "/llm/json/chunked/app/write-tests/component-testing/svelte/overview.json",
      "token_estimate": 144
    }
  ]
}