# Preact

[Preact](https://preactjs.com/) 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](/docs/runner.md#browser-runner).

## Setup[​](#setup "Direct link to Setup")

To setup WebdriverIO within your Preact project, follow the [instructions](/docs/component-testing.md#set-up) 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](https://vitejs.dev/) 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](/docs/runner.md#runner-options).

The Preact preset requires `@preact/preset-vite` to be installed. Also we recommend using [Testing Library](https://testing-library.com/) for rendering the component into the test page. Therefor you'll need to install the following additional dependencies:

* npm
* Yarn
* pnpm
* Bun

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

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

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

```
bun add --dev @testing-library/preact @preact/preset-vite
```

You can then start the tests by running:

```
npx wdio run ./wdio.conf.js
```

## Writing Tests[​](#writing-tests "Direct link to 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).toHaveText(expect.stringContaining('Current value: 5'))

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

You can find a full example of a WebdriverIO component test suite for Preact in our [example repository](https://github.com/webdriverio/component-testing-examples/tree/main/preact-typescript-vite).