Preact

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

Configuración

Para configurar WebdriverIO dentro de su proyecto Lit, siga las instrucciones en nuestros documentos de prueba de componentes. Asegúrese de seleccionar preact como preset dentro de sus opciones corredoras, por ejemplo:

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

info

Si ya estás usando Vite como servidor de desarrollo también puedes volver a usar tu configuración en vite. onfig.ts dentro de su configuración WebdriverIO. Para más información, consulte viteConfig en opciones de corredor.

El preset React requiere @preact/preset-vite para ser instalado. También recomendamos utilizar Testing Library para renderizar el componente en la página de prueba. Por lo tanto, tendrás que 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 puede iniciar las pruebas ejecutando:

npx wdio run ./wdio.conf.js

Tests de escritura

Dado que usted tiene el siguiente componente Lit:

./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 su prueba utilice 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 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'))
    })
})

Puede encontrar un ejemplo completo de una suite de pruebas de componentes WebdriverIO para Lit en nuestro repositorio de ejemplo.