Svelte

Svelte é uma abordagem radicalmente nova para a construção de interfaces de usuário. Enquanto frameworks tradicionais como React e Vue fazem a maior parte do seu trabalho no navegador, o Svelte transfere esse trabalho para uma etapa de compilação que acontece quando você constrói seu aplicativo. Você pode testar componentes Svelte diretamente em um navegador real usando WebdriverIO e seu browser runner.

Setup

Para configurar o WebdriverIO em seu projeto Svelte, siga as instruções em nossa documentação de testes de componentes. Certifique-se de selecionar svelte como preset dentro de suas opções de runner, por exemplo:

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

informação

Se você já estiver usando Vite como servidor de desenvolvimento, você também pode reutilizar sua configuração em vite.config.ts dentro da sua configuração WebdriverIO. Para mais informações, veja viteConfig nas opções do runner.

O preset Svelte requer que @sveltejs/vite-plugin-svelte esteja instalado. Também recomendamos o uso de Testing Library para renderizar o componente na página de teste. Portanto, você precisará instalar as seguintes dependências adicionais:

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

Você pode então iniciar os testes executando:

npx wdio run ./wdio.conf.js

Escrevendo Testes

Supondo que você tenha o seguinte 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>

No seu teste, use o método render de @testing-library/svelte para anexar o componente à página de teste. Para interagir com o componente, recomendamos usar comandos WebdriverIO, pois eles se comportam mais próximos às interações reais do usuário, por exemplo:

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')
    })
})

Você pode encontrar um exemplo completo de uma suíte de testes de componentes WebdriverIO para Svelte em nosso repositório de exemplos.