Preact

Preact es una alternativa rápida de 3kB a React con la misma API moderna. Puedes probar componentes de Preact directamente en un navegador real usando WebdriverIO y su ejecutor de navegador.

Configuración

Para configurar WebdriverIO dentro de tu proyecto Preact, sigue las instrucciones en nuestra documentación de pruebas de componentes. Asegúrate de seleccionar preact como preset dentro de tus opciones de ejecutor, por ejemplo:

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

información

Si ya estás usando Vite como servidor de desarrollo, también puedes reutilizar tu configuración en vite.config.ts dentro de tu configuración de WebdriverIO. Para más información, consulta viteConfig en las opciones del ejecutor.

El preset de Preact requiere que @preact/preset-vite esté instalado. También recomendamos usar Testing Library para renderizar el componente en la página de prueba. Por lo tanto, necesitarás instalar las siguientes dependencias adicionales:

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

Luego puedes iniciar las pruebas ejecutando:

npx wdio run ./wdio.conf.js

Escribiendo Pruebas

Dado que tienes el siguiente componente de 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>
    )
}

En tu prueba, usa el método render de @testing-library/preact para adjuntar el componente a la página de prueba. Para interactuar con el componente, recomendamos usar comandos de WebdriverIO ya que se comportan más cerca de las interacciones reales del usuario, por ejemplo:

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

Puedes encontrar un ejemplo completo de un conjunto de pruebas de componentes WebdriverIO para Preact en nuestro repositorio de ejemplos.