Skip to main content

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 install --save-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.