Svelte Component Testing
Framework Support​
Cypress Component Testing supports Svelte 3+ in a variety of different frameworks:
Svelte is currently in alpha support for component testing.
Tutorial​
Visit the Getting Started Guide for a step-by-step tutorial on adding component testing to any project and how to write your first tests.
Installation​
To get up and running with Cypress Component Testing in Svelte, install Cypress into your project:
npm install cypress --save-dev
Open Cypress:
npx cypress open
The Cypress Launchpad will guide you through configuring your project.
For a step-by-step guide on how to create a component test, refer to the Getting Started 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
- cypress.config.ts
const { defineConfig } = require('cypress')
module.exports = defineConfig({
component: {
devServer: {
framework: 'svelte',
bundler: 'vite',
},
},
})
import { defineConfig } from 'cypress'
export default defineConfig({
component: {
devServer: {
framework: 'svelte',
bundler: 'vite',
},
},
})
Svelte Vite Sample Apps​
Svelte with Webpack​
Cypress Component Testing works with Vue apps that use Webpack 4+ as the bundler.
Webpack Configuration​
- cypress.config.js
- cypress.config.ts
const { defineConfig } = require('cypress')
const webpackConfig = require('./webpack.config')
module.exports = defineConfig({
component: {
devServer: {
framework: 'svelte',
bundler: 'webpack',
// optionally pass in webpack config
webpackConfig,
},
},
})
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.