diff --git a/docs/app/component-testing/get-started.mdx b/docs/app/component-testing/get-started.mdx index c16e3d0c0b..364b3b5d68 100644 --- a/docs/app/component-testing/get-started.mdx +++ b/docs/app/component-testing/get-started.mdx @@ -47,8 +47,8 @@ following development servers and frameworks: | [Vue with Vite](/app/component-testing/vue/overview#Vue-with-Vite) | Vue 3 | Vite 4-5 | | [Vue with Webpack](/app/component-testing/vue/overview#Vue-with-Webpack) | Vue 3 | Webpack 4-5 | | [Angular](/app/component-testing/angular/overview#Framework-Configuration) | Angular 17-18 | Webpack 5 | -| [Svelte with Vite](/app/component-testing/svelte/overview#Svelte-with-Vite) Alpha | Svelte 3-4 | Vite 4-5 | -| [Svelte with Webpack](/app/component-testing/svelte/overview#Svelte-with-Webpack) Alpha | Svelte 3-4 | Webpack 4-5 | +| [Svelte with Vite](/app/component-testing/svelte/overview#Svelte-with-Vite) Alpha | Svelte 4 | Vite 4-5 | +| [Svelte with Webpack](/app/component-testing/svelte/overview#Svelte-with-Webpack) Alpha | Svelte 4 | Webpack 4-5 | The following integrations are built and maintained by Cypress community members. diff --git a/docs/app/component-testing/svelte/overview.mdx b/docs/app/component-testing/svelte/overview.mdx index ea5dedbc3d..9e9abfb478 100644 --- a/docs/app/component-testing/svelte/overview.mdx +++ b/docs/app/component-testing/svelte/overview.mdx @@ -16,7 +16,7 @@ sidebar_label: Overview ## Framework Support -Cypress Component Testing supports Svelte 3+ in a variety of different +Cypress Component Testing supports Svelte 4 in a variety of different frameworks: - [Svelte with Vite](#Svelte-with-Vite) @@ -71,7 +71,7 @@ properly. The examples below are for reference purposes. ### Svelte with Vite -Cypress Component Testing works with Svelte apps that use Vite 2+ as the +Cypress Component Testing works with Svelte apps that use Vite 4+ as the bundler. #### Vite Configuration @@ -93,7 +93,7 @@ bundler. #### Svelte Vite Sample Apps -- [Svelte 3 Vite 3 with Typescript](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/svelte-vite-ts) +- [Svelte 4 Vite 5 with Typescript](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/svelte-vite-ts) ### Svelte with Webpack @@ -129,4 +129,4 @@ in manually via the `webpackConfig` option. #### Svelte Webpack Sample Apps -- [Svelte 3 Webpack 5 with Typescript](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/svelte-webpack-ts) +- [Svelte 4 Webpack 5 with Typescript](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/svelte-webpack-ts) diff --git a/docs/app/references/migration-guide.mdx b/docs/app/references/migration-guide.mdx index 66c3d1e6a9..029c6ea6d1 100644 --- a/docs/app/references/migration-guide.mdx +++ b/docs/app/references/migration-guide.mdx @@ -172,6 +172,41 @@ module.exports = defineConfig({ }) ``` +### Svelte 3 for Component Testing is no longer supported + +With Cypress 14, Cypress no longer ships the Svelte 3 component testing harness with the Cypress binary. + +However, if you have not been able to upgrade Svelte and still need the Cypress Svelte 3 test harness, it can be installed independently via version 2.x.x of the [@cypress/svelte](https://www.npmjs.com/package/@cypress/svelte) package. + +```sh +npm install --save-dev @cypress/svelte@2 +``` + +Note that this version of the test harness is deprecated and no longer actively supported by Cypress and is intended to serve as a temporary work around until you are able to migrate your project to Svelte 4+. The Cypress launchpad will also warn against Component testing mismatched dependencies, but this will not stop you from running your component tests. + +To update, inside your support file (ex: `./cypress/support/component.(js|ts)`) or wherever your mount function is imported, change + +```ts +import { mount } from `cypress/svelte` +``` + +to + +```ts +import { mount } from `@cypress/svelte` +``` + +Your code should now look like this: + +```ts +import MySvelteComponent from './MySvelteComponent' +import { mount } from `@cypress/svelte` + +it('renders', () => { + cy.mount(MySvelteComponent) +}) +``` + ## Migrating to Cypress 13.0 This guide details the changes and how to change your code to migrate to Cypress