Preact

Preact è un'alternativa veloce a React di soli 3kB con la stessa API moderna. Puoi testare i componenti Preact direttamente in un browser reale utilizzando WebdriverIO e il suo browser runner.

Setup

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

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

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, consulta viteConfig nelle opzioni runner.

Il preset Preact richiede l'installazione di @preact/preset-vite. 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/preact @preact/preset-vite

Yarn

yarn add --dev @testing-library/preact @preact/preset-vite

pnpm

pnpm add --save-dev @testing-library/preact @preact/preset-vite

Puoi quindi avviare i test eseguendo:

npx wdio run ./wdio.conf.js

Scrittura dei Test

Dato il seguente componente Preact:

./components/Component.jsx

import { h } from 'preact'
import { useState } from 'preact/hooks'

interface Props {
    initialCount: number
}

export function Counter({ initialCount }: Props) {
    const [count, setCount] = useState(initialCount)
    const increment = () => setCount(count + 1)

    return (
        <div>
            Current value: {count}
            <button onClick={increment}>Increment</button>
        </div>
    )
}

Nel tuo test utilizza il metodo render da @testing-library/preact 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 reali dell'utente, ad esempio:

app.test.tsx

import { expect } from 'expect'
import { render, screen } from '@testing-library/preact'

import { Counter } from './components/PreactComponent.js'

describe('Preact Component Testing', () => {
    it('should increment after "Increment" button is clicked', async () => {
        const component = await $(render(<Counter initialCount={5} />))
        await expect(component).toHaveText(expect.stringContaining('Current value: 5'))

        const incrElem = await $(screen.getByText('Increment'))
        await incrElem.click()
        await expect(component).toHaveText(expect.stringContaining('Current value: 6'))
    })
})

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