Svelte

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

Configurar

Para configurar o WebdriverIO no seu projeto Svelte, siga as instruções em nossos documentos de teste de componentes. Certifique-se de selecionar svelte como predefinição nas opções do seu corredor, por exemplo:

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

informação

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

A predefinição Svelte requer que @sveltejs/vite-plugin-svelte seja instalado. Também recomendamos usar a Biblioteca de testes 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

Considerando que você tem 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 das 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 um conjunto de testes de componentes WebdriverIO para Svelte em nosso repositório de exemplos.