ری‌اکت

React ایجاد رابط‌های کاربری تعاملی را بدون درد می‌کند. طرح‌های ساده‌ای برای هر وضعیت در برنامه خود طراحی کنید، و React فقط مؤلفه‌های مناسب را هنگام تغییر داده‌ها به‌طور کارآمد به‌روزرسانی و رندر می‌کند. شما می‌توانید مؤلفه‌های React را مستقیماً در یک مرورگر واقعی با استفاده از WebdriverIO و اجراکننده مرورگر آن آزمایش کنید.

راه‌اندازی

برای راه‌اندازی WebdriverIO در پروژه React خود، دستورالعمل‌های موجود در مستندات آزمایش مؤلفه‌های ما را دنبال کنید. مطمئن شوید که react را به‌عنوان پیش‌تنظیم در گزینه‌های اجراکننده خود انتخاب کنید، به عنوان مثال:

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

اطلاعات

اگر شما از قبل از Vite به‌عنوان سرور توسعه استفاده می‌کنید، می‌توانید پیکربندی خود را در vite.config.ts درون تنظیمات WebdriverIO خود نیز استفاده کنید. برای اطلاعات بیشتر، به 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

در آزمایش خود از متد render از @testing-library/react برای الحاق مؤلفه به صفحه آزمایش استفاده کنید. برای تعامل با مؤلفه، ما توصیه می‌کنیم از دستورات 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')
    })
})

شما می‌توانید یک نمونه کامل از مجموعه آزمایش مؤلفه WebdriverIO برای React را در مخزن نمونه ما پیدا کنید.