Preact

Preactは、同じ最新のAPIを持つReactの高速な3kB代替品です。WebdriverIOとそのブラウザランナーを使用して、実際のブラウザで直接Preactコンポーネントをテストできます。

セットアップ

PreactプロジェクトでWebdriverIOをセットアップするには、コンポーネントテストドキュメントの手順に従ってください。ランナーオプション内でプリセットとしてpreactを選択してください。例：

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

情報

すでにViteを開発サーバーとして使用している場合は、WebdriverIO設定内でvite.config.tsの設定を再利用することもできます。詳細については、ランナーオプションのviteConfigを参照してください。

Preactプリセットでは@preact/preset-viteのインストールが必要です。また、コンポーネントをテストページにレンダリングするためにTesting Libraryの使用をお勧めします。そのため、以下の追加依存関係をインストールする必要があります：

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

その後、以下のコマンドでテストを開始できます：

npx wdio run ./wdio.conf.js

テストの作成

以下のようなPreactコンポーネントがあるとします：

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

テストでは、@testing-library/preactのrenderメソッドを使用して、コンポーネントをテストページに追加します。コンポーネントと対話するには、実際のユーザー操作により近い動作をするWebdriverIOコマンドの使用をお勧めします：

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

WebdriverIOのPreact用コンポーネントテストスイートの完全な例は、当社のサンプルリポジトリで確認できます。