Preact

Preact 是 React 的快速 3kB 替代方案，具有相同的現代 API。您可以使用 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'))
    })
})

您可以在我們的範例儲存庫中找到適用於 Preact 的 WebdriverIO 元件測試套件的完整範例。