{ "doc": { "id": "app/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/component-testing/svelte/overview.md", "version": "03bfb6dd0bf3e642e195a5d311fa3c83c87ead21", "updated_at": "2026-05-30T03:47:39.980Z", "headings": [ { "id": "app/component-testing/svelte/overview#svelte-component-testing", "text": "Svelte Component Testing", "level": 1 }, { "id": "app/component-testing/svelte/overview#what-youll-learn", "text": "What you'll learn", "level": 5 }, { "id": "app/component-testing/svelte/overview#framework-support", "text": "Framework Support", "level": 2 }, { "id": "app/component-testing/svelte/overview#tutorial", "text": "Tutorial", "level": 2 }, { "id": "app/component-testing/svelte/overview#installation", "text": "Installation", "level": 2 }, { "id": "app/component-testing/svelte/overview#framework-configuration", "text": "Framework Configuration", "level": 2 }, { "id": "app/component-testing/svelte/overview#svelte-with-vite", "text": "Svelte with Vite", "level": 3 }, { "id": "app/component-testing/svelte/overview#vite-configuration", "text": "Vite Configuration", "level": 4 }, { "id": "app/component-testing/svelte/overview#svelte-vite-sample-apps", "text": "Svelte Vite Sample Apps", "level": 4 }, { "id": "app/component-testing/svelte/overview#svelte-with-webpack", "text": "Svelte with Webpack", "level": 3 }, { "id": "app/component-testing/svelte/overview#webpack-configuration", "text": "Webpack Configuration", "level": 4 }, { "id": "app/component-testing/svelte/overview#svelte-webpack-sample-apps", "text": "Svelte Webpack Sample Apps", "level": 4 } ] }, "content": { "type": "root", "children": [ { "type": "heading", "depth": 1, "children": [ { "type": "text", "value": "Svelte Component Testing" } ] }, { "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 set up component tests in Svelte" } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "How to configure Cypress for Svelte projects" } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "How to test Svelte components with Vite and a custom Webpack config" } ] } ] } ] }, { "type": "heading", "depth": 2, "children": [ { "type": "text", "value": "Framework Support" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Cypress Component Testing supports Svelte 5 in a variety of different frameworks:" } ] }, { "type": "list", "ordered": false, "start": null, "spread": false, "children": [ { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "link", "title": null, "url": "#Svelte-with-Vite", "children": [ { "type": "text", "value": "Svelte with Vite" } ] } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "link", "title": null, "url": "#Svelte-with-Webpack", "children": [ { "type": "text", "value": "Svelte with Webpack" } ] } ] } ] } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Svelte is currently in alpha support for component testing." } ] }, { "type": "heading", "depth": 2, "children": [ { "type": "text", "value": "Tutorial" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Visit the " }, { "type": "link", "title": null, "url": "/llm/markdown/app/component-testing/get-started.md", "children": [ { "type": "text", "value": "Getting Started Guide" } ] }, { "type": "text", "value": " for a step-by-step tutorial on adding component testing to any project and how to write your first tests." } ] }, { "type": "heading", "depth": 2, "children": [ { "type": "text", "value": "Installation" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "To get up and running with Cypress Component Testing in Svelte, install Cypress into your project:" } ] }, { "type": "list", "ordered": false, "start": null, "spread": false, "children": [ { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "npm" } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "yarn" } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "pnpm" } ] } ] } ] }, { "type": "code", "lang": null, "meta": null, "value": "npm install cypress --save-dev" }, { "type": "code", "lang": null, "meta": null, "value": "yarn add cypress --dev" }, { "type": "code", "lang": null, "meta": null, "value": "pnpm add --save-dev cypress" }, { "type": "paragraph", "children": [ { "type": "text", "value": "Open Cypress:" } ] }, { "type": "list", "ordered": false, "start": null, "spread": false, "children": [ { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "npm" } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "yarn" } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "pnpm" } ] } ] } ] }, { "type": "code", "lang": null, "meta": null, "value": "npx cypress open" }, { "type": "code", "lang": null, "meta": null, "value": "yarn cypress open" }, { "type": "code", "lang": null, "meta": null, "value": "pnpm cypress open" }, { "type": "paragraph", "children": [ { "type": "text", "value": "Choose Component Testing" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "The Cypress Launchpad will guide you through configuring your project." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "For a step-by-step guide on how to create a component test, refer to the " }, { "type": "link", "title": null, "url": "/llm/markdown/app/component-testing/get-started.md", "children": [ { "type": "text", "value": "Getting Started" } ] }, { "type": "text", "value": " guide." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "For usage and examples, visit the " }, { "type": "link", "title": null, "url": "/llm/markdown/app/component-testing/svelte/examples.md", "children": [ { "type": "text", "value": "Svelte Examples" } ] }, { "type": "text", "value": " guide." } ] }, { "type": "heading", "depth": 2, "children": [ { "type": "text", "value": "Framework Configuration" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Cypress Component Testing works out of the box with " }, { "type": "link", "title": null, "url": "https://vitejs.dev/", "children": [ { "type": "text", "value": "Vite" } ] }, { "type": "text", "value": ", and a custom " }, { "type": "link", "title": null, "url": "https://webpack.js.org/", "children": [ { "type": "text", "value": "Webpack" } ] }, { "type": "text", "value": " config. Cypress will automatically detect one of these frameworks during setup and configure them properly." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "For a full explanation of how the dev server and bundler work — including automatic config detection and override options — see " }, { "type": "link", "title": null, "url": "/llm/markdown/app/component-testing/component-framework-configuration.md#Dev-Server-and-Bundler", "children": [ { "type": "text", "value": "Component Testing Configuration — Dev Server and Bundler" } ] }, { "type": "text", "value": "." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "The examples below are for quick reference." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": "Svelte with Vite" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Cypress Component Testing works with Svelte apps that use Vite 5+ as the bundler." } ] }, { "type": "heading", "depth": 4, "children": [ { "type": "text", "value": "Vite Configuration" } ] }, { "type": "list", "ordered": false, "start": null, "spread": false, "children": [ { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "cypress.config.js" } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "cypress.config.ts" } ] } ] } ] }, { "type": "code", "lang": null, "meta": null, "value": "const { defineConfig } = require('cypress')module.exports = defineConfig({ component: { devServer: { framework: 'svelte', bundler: 'vite', }, },})" }, { "type": "code", "lang": null, "meta": null, "value": "import { defineConfig } from 'cypress'export default defineConfig({ component: { devServer: { framework: 'svelte', bundler: 'vite', }, },})" }, { "type": "heading", "depth": 4, "children": [ { "type": "text", "value": "Svelte Vite Sample Apps" } ] }, { "type": "list", "ordered": false, "start": null, "spread": false, "children": [ { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "link", "title": null, "url": "https://github.com/cypress-io/cypress-component-testing-apps/tree/main/svelte-vite-ts", "children": [ { "type": "text", "value": "Svelte 5 Vite with Typescript" } ] } ] } ] } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": "Svelte with Webpack" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Cypress Component Testing works with Svelte apps that use Webpack 5+ as the bundler." } ] }, { "type": "heading", "depth": 4, "children": [ { "type": "text", "value": "Webpack Configuration" } ] }, { "type": "list", "ordered": false, "start": null, "spread": false, "children": [ { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "cypress.config.js" } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "cypress.config.ts" } ] } ] } ] }, { "type": "code", "lang": null, "meta": null, "value": "const { defineConfig } = require('cypress')const webpackConfig = require('./webpack.config')module.exports = defineConfig({ component: { devServer: { framework: 'svelte', bundler: 'webpack', // optionally pass in webpack config webpackConfig, }, },})" }, { "type": "code", "lang": null, "meta": null, "value": "import { defineConfig } from 'cypress'import webpackConfig from './webpack.config'export default defineConfig({ component: { devServer: { framework: 'svelte', bundler: 'webpack', // optionally pass in webpack config webpackConfig, }, },})" }, { "type": "paragraph", "children": [ { "type": "text", "value": "If 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." } ] }, { "type": "heading", "depth": 4, "children": [ { "type": "text", "value": "Svelte Webpack Sample Apps" } ] }, { "type": "list", "ordered": false, "start": null, "spread": false, "children": [ { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "link", "title": null, "url": "https://github.com/cypress-io/cypress-component-testing-apps/tree/main/svelte-webpack-ts", "children": [ { "type": "text", "value": "Svelte 5 Webpack 5 with Typescript" } ] } ] } ] } ] } ] }, "token_estimate": 635 }