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 组件测试套件的完整示例。