Svelte

Svelte è un approccio radicalmente nuovo alla creazione di interfacce utente. Mentre i framework tradizionali come React e Vue svolgono la maggior parte del loro lavoro nel browser, Svelte sposta quel lavoro in una fase di compilazione che avviene quando costruisci la tua app. Puoi testare i componenti Svelte direttamente in un browser reale utilizzando WebdriverIO e il suo browser runner.

Setup

Per configurare WebdriverIO all'interno del tuo progetto Svelte, segui le istruzioni nella nostra documentazione di test dei componenti. Assicurati di selezionare svelte come preset all'interno delle tue opzioni runner, ad esempio:

// wdio.conf.js
export const config = {
    // ...
    runner: ['browser', {
        preset: 'svelte'
    }],
    // ...
}

informazione

Se stai già utilizzando Vite come server di sviluppo, puoi anche riutilizzare la tua configurazione in vite.config.ts all'interno della tua configurazione WebdriverIO. Per maggiori informazioni, vedi viteConfig nelle opzioni runner.

Il preset Svelte richiede che @sveltejs/vite-plugin-svelte sia installato. Inoltre, consigliamo di utilizzare Testing Library per renderizzare il componente nella pagina di test. Pertanto, dovrai installare le seguenti dipendenze aggiuntive:

npm

npm install --save-dev @testing-library/svelte @sveltejs/vite-plugin-svelte

Yarn

yarn add --dev @testing-library/svelte @sveltejs/vite-plugin-svelte

pnpm

pnpm add --save-dev @testing-library/svelte @sveltejs/vite-plugin-svelte

Puoi quindi avviare i test eseguendo:

npx wdio run ./wdio.conf.js

Scrivere Test

Dato che hai il seguente componente Svelte:

./components/Component.svelte

<script>
    export let name

    let buttonText = 'Button'

    function handleClick() {
      buttonText = 'Button Clicked'
    }
</script>

<h1>Hello {name}!</h1>
<button on:click="{handleClick}">{buttonText}</button>

Nel tuo test, utilizza il metodo render da @testing-library/svelte per collegare il componente alla pagina di test. Per interagire con il componente, consigliamo di utilizzare i comandi WebdriverIO poiché si comportano in modo più simile alle interazioni utente reali, ad esempio:

svelte.test.js

import expect from 'expect'

import { render, fireEvent, screen } from '@testing-library/svelte'
import '@testing-library/jest-dom'

import Component from './components/Component.svelte'

describe('Svelte Component Testing', () => {
    it('changes button text on click', async () => {
        render(Component, { name: 'World' })
        const button = await $('button')
        await expect(button).toHaveText('Button')
        await button.click()
        await expect(button).toHaveText('Button Clicked')
    })
})

Puoi trovare un esempio completo di una suite di test di componenti WebdriverIO per Svelte nel nostro repository di esempi.