React

React 使创建交互式 UI 变得轻松。为应用程序中的每个状态设计简单的视图，当您的数据更改时，React 将有效地更新和渲染正确的组件。您可以使用 WebdriverIO 及其浏览器运行器直接在真实的浏览器中测试 React 组件。

设置

要在您的 React 项目中设置 WebdriverIO，请按照组件测试文档中的说明进行操作。确保在运行器选项中选择react作为预设，例如：

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

信息

如果您已经在使用Vite作为开发服务器，您也可以在 WebdriverIO 配置中重用vite.config.ts中的配置。有关更多信息，请参阅运行器选项中的viteConfig。

React 预设需要安装@vitejs/plugin-react。我们还建议使用Testing Library将组件渲染到测试页面中。因此，您需要安装以下其他依赖项

npm

npm install --save-dev @testing-library/react @vitejs/plugin-react

Yarn

yarn add --dev @testing-library/react @vitejs/plugin-react

pnpm

pnpm add --save-dev @testing-library/react @vitejs/plugin-react

然后，您可以通过运行以下命令启动测试：

npx wdio run ./wdio.conf.js

编写测试

假设您有以下 React 组件

./components/Component.jsx

import React, { useState } from 'react'

function App() {
    const [theme, setTheme] = useState('light')

    const toggleTheme = () => {
        const nextTheme = theme === 'light' ? 'dark' : 'light'
        setTheme(nextTheme)
    }

    return <button onClick={toggleTheme}>
        Current theme: {theme}
    </button>
}

export default App

在您的测试中，使用来自@testing-library/react的render方法将组件附加到测试页面。为了与组件进行交互，我们建议使用 WebdriverIO 命令，因为它们的行为更接近实际的用户交互，例如：

app.test.tsx

import { expect } from '@wdio/globals'
import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'

import * as matchers from '@testing-library/jest-dom/matchers'
expect.extend(matchers)

import App from './components/Component.jsx'

describe('React Component Testing', () => {
    it('Test theme button toggle', async () => {
        render(<App />)
        const buttonEl = screen.getByText(/Current theme/i)

        await $(buttonEl).click()
        expect(buttonEl).toContainHTML('dark')
    })
})

您可以在我们的示例存储库中找到 React 的 WebdriverIO 组件测试套件的完整示例。