Preact

Preact is a fast 3kB alternative to React with the same modern API. You can test Preact components directly in a real browser using WebdriverIO and its browser runner.

Setup

To setup WebdriverIO within your Preact project, follow the instructions in our component testing docs. Make sure to select preact as preset within your runner options, e.g.:

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

info

If you are already using Vite as development server you can also just re-use your configuration in vite.config.ts within your WebdriverIO config. For more information, see viteConfig in runner options.

The React preset requires @preact/preset-vite to be installed. Also we recommend using Testing Library for rendering the component into the test page. Therefor you'll need to install the following additional dependencies:

npm

npm install --save-dev @testing-library/preact @preact/preset-vite

Yarn

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

You can then start the tests by running:

npx wdio run ./wdio.conf.js

Writing Tests

Given you have the following Preact component:

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

In your test use the render method from @testing-library/preact to attach the component to the test page. To interact with the component we recommend to use WebdriverIO commands as they behave more close to actual user interactions, e.g.:

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).toHaveTextContaining('Current value: 5')

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

You can find a full example of a WebdriverIO component test suite for React in our example repository.