Preact

Preact ist eine schnelle 3kB-Alternative zu React mit derselben modernen API. Mit WebdriverIO und seinem Browser Runnerkönnen Sie Preact-Komponenten direkt in einem echten Browser testen.

Setup

Um WebdriverIO in Ihrem Preact-Projekt einzurichten, befolgen Sie die Anweisungen in unseren Komponententestdokumenten. Stellen Sie sicher, dass Sie Preact als Voreinstellung in Ihren Runner-Optionen auswählen, z. B.:

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

info

Wenn Sie bereits Vite als Entwicklungsserver verwenden, können Sie auch einfach Ihre Konfiguration in vite.config.ts in Ihrer WebdriverIO-Konfiguration wiederverwenden. Weitere Informationen finden Sie unter viteConfig in Runner-Optionen.

Für die Preact-Voreinstellung muss @preact/preset-vite installiert sein. Außerdem empfehlen wir die Verwendung von Testing Library zum Rendern der Komponente auf der Testseite. Dazu müssen Sie die folgenden zusätzlichen Abhängigkeiten installieren:

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

Sie können die Tests dann starten, indem Sie Folgendes ausführen:

npx wdio run ./wdio.conf.js

Tests schreiben

Vorausgesetzt, Sie haben die folgende Preact-Komponente:

./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>
    )
}

Verwenden Sie in Ihrem Test die Methode render aus @testing-library/preact , um die Komponente an die Testseite anzuhängen. Um mit der Komponente zu interagieren, empfehlen wir die Verwendung von WebdriverIO-Befehlen, da sie sich näher an tatsächlichen Benutzerinteraktionen verhalten, z.B.:

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

Ein vollständiges Beispiel einer Testsuite für WebdriverIO-Komponenten für Preact finden Sie in unserem -Beispiel-Repository.