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