رياكت

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

Bun

bun add --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 في مستودع الأمثلة الخاص بنا.