diff --git a/docs/app/component-testing/get-started.mdx b/docs/app/component-testing/get-started.mdx
index 06a74da506..0a768350d1 100644
--- a/docs/app/component-testing/get-started.mdx
+++ b/docs/app/component-testing/get-started.mdx
@@ -46,8 +46,8 @@ following development servers and frameworks:
| [Vue with Vite](/app/component-testing/vue/overview#Vue-with-Vite) | Vue 3 | Vite 4-6 |
| [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-19 | Webpack 5 |
-| [Svelte with Vite](/app/component-testing/svelte/overview#Svelte-with-Vite) Alpha | Svelte 4 | Vite 4-6 |
-| [Svelte with Webpack](/app/component-testing/svelte/overview#Svelte-with-Webpack) Alpha | Svelte 4 | Webpack 4-5 |
+| [Svelte with Vite](/app/component-testing/svelte/overview#Svelte-with-Vite) Alpha | Svelte 5 | Vite 4-6 |
+| [Svelte with Webpack](/app/component-testing/svelte/overview#Svelte-with-Webpack) Alpha | Svelte 5 | Webpack 4-5 |
The following integrations are built and maintained by Cypress community members.
@@ -618,14 +618,10 @@ it('clicking + fires a change event with the incremented value', () => {
```js
it('clicking + fires a change event with the incremented value', () => {
- const changeSpy = cy.spy().as('changeSpy')
- cy.mount(Stepper).then(({ component }) => {
- component.$on('change', changeSpy)
- })
+ const onChangeSpy = cy.spy().as('onChangeSpy')
+ cy.mount(Stepper, { props: { onChange: onChangeSpy } })
cy.get('[data-cy=increment]').click()
- cy.get('@changeSpy').should('have.been.calledWithMatch', {
- detail: { count: 1 },
- })
+ cy.get('@onChangeSpy').should('have.been.calledWith', 1)
})
```
diff --git a/docs/app/component-testing/svelte/api.mdx b/docs/app/component-testing/svelte/api.mdx
index deef435a3d..77b3fc9f1b 100644
--- a/docs/app/component-testing/svelte/api.mdx
+++ b/docs/app/component-testing/svelte/api.mdx
@@ -20,15 +20,11 @@ import { mount } from 'cypress/svelte'
Signature |
- mount<T extends SvelteComponent>(Component:
- SvelteConstructor<T>, options?: MountOptions<T>):
- Cypress.Chainable<MountReturn<T>>
+ mount(Component: Component<Record<string, any>, Record<string,
+ any>, any>, options?: MountOptions):
+ Cypress.Chainable<MountReturn>
|
-
- Generic Param T |
- The component type |
-
Returns |
Cypress.Chainable<MountReturn> |
@@ -44,12 +40,14 @@ import { mount } from 'cypress/svelte'
component |
- SvelteConstructor<T> |
+
+ Component<Record<string, any>, Record<string, any>, any>
+ |
Svelte component being mounted |
options |
- MountOptions<T> (optional) |
+ MountOptions (optional) |
options to customize the component being mounted |
@@ -117,7 +115,7 @@ Type that the `mount` function yields
component |
- T |
+ Record<string, any> |
|
diff --git a/docs/app/component-testing/svelte/examples.mdx b/docs/app/component-testing/svelte/examples.mdx
index 529137faa4..42609dfca5 100644
--- a/docs/app/component-testing/svelte/examples.mdx
+++ b/docs/app/component-testing/svelte/examples.mdx
@@ -42,21 +42,18 @@ it('mounts', () => {
### Testing Event Handlers
-To test emitted events from a Svelte component, we can use access the component
-instances and use `$on` method to listen to events raised. We can also pass in a
+To test emitted events from a Svelte component, we need to pass in a callback
+for when we increment the stepper. The Stepper component
+will need to invoke this callback for us. We can also pass in a
Cypress spy so we can query the spy later for results. In the example below, we
-listen to the `change` event and validate it was called as expected:
+pass in the `onChange` callback handler and validate it was called as expected:
```js
it('clicking + fires a change event with the incremented value', () => {
- const changeSpy = cy.spy().as('changeSpy')
- cy.mount(Stepper).then(({ component }) => {
- component.$on('change', changeSpy)
- })
+ const onChangeSpy = cy.spy().as('onChangeSpy')
+ cy.mount(Stepper, { props: { onChange: onChangeSpy } })
cy.get('[data-cy=increment]').click()
- cy.get('@changeSpy').should('have.been.calledWithMatch', {
- detail: { count: 1 },
- })
+ cy.get('@onChangeSpy').should('have.been.calledWith', 1)
})
```
diff --git a/docs/app/component-testing/svelte/overview.mdx b/docs/app/component-testing/svelte/overview.mdx
index b7e2bec4ac..d13cb351b2 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 4 in a variety of different
+Cypress Component Testing supports Svelte 5 in a variety of different
frameworks:
- [Svelte with Vite](#Svelte-with-Vite)
@@ -93,7 +93,7 @@ bundler.
#### Svelte Vite Sample Apps
-- [Svelte 4 Vite 5 with Typescript](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/svelte-vite-ts)
+- [Svelte 5 Vite 6 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 4 Webpack 5 with Typescript](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/svelte-webpack-ts)
+- [Svelte 5 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 49770b62f0..838d8c5a38 100644
--- a/docs/app/references/migration-guide.mdx
+++ b/docs/app/references/migration-guide.mdx
@@ -246,17 +246,17 @@ module.exports = defineConfig({
})
```
-### Svelte 3 for Component Testing is no longer supported
+### Svelte 3 and 4 for Component Testing are no longer supported
-With Cypress 14, Cypress no longer ships the Svelte 3 component testing harness with the Cypress binary.
+With Cypress 14, Cypress no longer ships the Svelte 3 and 4 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.
+However, if you have not been able to upgrade Svelte and still need the Cypress Svelte 3 and 4 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.
+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 5+. 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