Svelte Component Testing

Framework Support

Cypress Component Testing supports Svelte 3+ in a variety of different frameworks:

• Svelte with Vite
• Svelte with Webpack

caution

Svelte is currently in alpha support for component testing.

Tutorial

Visit the Svelte Quickstart Guide for a step-by-step tutorial on creating a new Svelte app and adding component tests.

Installation

To get up and running with Cypress Component Testing in Svelte, install Cypress into your project:

npm i cypress -D

Open Cypress:

npx cypress open

Choose Component Testing

The Cypress Launchpad will guide you through configuring your project.

info

For a step-by-step guide on how to create a component test, refer to the Svelte Quickstart guide.

For usage and examples, visit the Svelte Examples guide.

Framework Configuration

Cypress Component Testing works out of the box with Vite, and a custom Webpack config. Cypress will automatically detect one of these frameworks during setup and configure them properly. The examples below are for reference purposes.

Svelte with Vite

Cypress Component Testing works with Svelte apps that use Vite 2+ as the bundler.

Vite Configuration

cypress.config.js

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  component: {
    devServer: {
      framework: 'svelte',
      bundler: 'vite',
    },
  },
})

cypress.config.ts

import { defineConfig } from 'cypress'

export default defineConfig({
  component: {
    devServer: {
      framework: 'svelte',
      bundler: 'vite',
    },
  },
})

Svelte Vite Sample Apps

• Svelte 3 Vite 3 with Typescript

Svelte with Webpack

Cypress Component Testing works with Vue apps that use Webpack 4+ as the bundler.

Webpack Configuration

cypress.config.js

const { defineConfig } = require('cypress')
const webpackConfig = require('./webpack.config')

module.exports = defineConfig({
  component: {
    devServer: {
      framework: 'svelte',
      bundler: 'webpack',
      // optionally pass in webpack config
      webpackConfig,
    },
  },
})

cypress.config.ts

import { defineConfig } from 'cypress'
import webpackConfig from './webpack.config'

export default defineConfig({
  component: {
    devServer: {
      framework: 'svelte',
      bundler: 'webpack',
      // optionally pass in webpack config
      webpackConfig,
    },
  },
})

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.

Svelte Webpack Sample Apps

• Svelte 3 Webpack 5 with Typescript