docs: remove svelte 3 references and update migration guide

cypress-io · Nov 8, 2024 · 733b7e5 · 733b7e5
1 parent 91d4cbb
commit 733b7e5
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 6 deletions.
diff --git 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) <Badge type="info">Alpha</Badge>       | Svelte 3-4    | Vite 4-5    |
-| [Svelte with Webpack](/app/component-testing/svelte/overview#Svelte-with-Webpack) <Badge type="info">Alpha</Badge> | Svelte 3-4    | Webpack 4-5 |
+| [Svelte with Vite](/app/component-testing/svelte/overview#Svelte-with-Vite) <Badge type="info">Alpha</Badge>       | Svelte 4      | Vite 4-5    |
+| [Svelte with Webpack](/app/component-testing/svelte/overview#Svelte-with-Webpack) <Badge type="info">Alpha</Badge> | 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
@@ -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
@@ -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