React

React macht es schmerzlos, interaktive UIs zu erstellen. Entwerfen Sie einfache Ansichten für jeden Status in Ihrer Anwendung, und React aktualisiert und rendert effizient genau die richtigen Komponenten, wenn sich Ihre Daten ändern. Sie können React-Komponenten direkt in einem echten Browser mit WebdriverIO und seinem Browser-Runnertesten.

Setup

Um WebdriverIO in Ihrem React-Projekt einzurichten, befolgen Sie die Anweisungen in unseren Komponententestdokumenten. Stellen Sie sicher, dass Sie react als Voreinstellung in Ihren Optionen auswählen, z. B.:

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

info

Wenn Sie bereits Vite als Entwicklungsserver verwenden, können Sie auch einfach Ihre Konfiguration in vite.config.ts in Ihrer WebdriverIO-Konfiguration wiederverwenden. Weitere Informationen finden Sie unter viteConfig in Runner-Optionen.

Für die React-Voreinstellung muss @vitejs/plugin-react installiert sein. Außerdem empfehlen wir die Verwendung von Testing Library zum Rendern der Komponente auf der Testseite. Dazu müssen Sie die folgenden zusätzlichen Abhängigkeiten installieren:

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

Sie können die Tests dann starten, indem Sie Folgendes ausführen:

npx wdio run ./wdio.conf.js

Tests schreiben

Vorausgesetzt, Sie haben die folgende React-Komponente:

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

Verwenden Sie in Ihrem Test die Methode render aus @testing-library/react , um die Komponente an die Testseite anzuhängen. Um mit der Komponente zu interagieren, empfehlen wir die Verwendung von WebdriverIO-Befehlen, da sie sich näher an tatsächlichen Benutzerinteraktionen verhalten, z.B.:

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

Ein vollständiges Beispiel einer Testsuite für WebdriverIO-Komponenten für React finden Sie in unserem -Beispiel-Repository.