برياكت

Preact هو بديل سريع 3 كيلوبايت لـ React يتمتع بنفس واجهة البرمجة الحديثة. يمكنك اختبار مكونات Preact مباشرة في متصفح حقيقي باستخدام WebdriverIO و مشغل المتصفح الخاص به.

الإعداد

لإعداد WebdriverIO داخل مشروع Preact الخاص بك، اتبع التعليمات في وثائق اختبار المكونات لدينا. تأكد من اختيار preact كإعداد مسبق ضمن خيارات المشغل الخاص بك، على سبيل المثال:

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

معلومات

إذا كنت تستخدم بالفعل Vite كخادم تطوير، يمكنك أيضًا إعادة استخدام التكوين الخاص بك في vite.config.ts داخل تكوين WebdriverIO. لمزيد من المعلومات، راجع 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>
    )
}

في اختبارك، استخدم طريقة render من @testing-library/preact لإرفاق المكون بصفحة الاختبار. للتفاعل مع المكون، نوصي باستخدام أوامر 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'))
    })
})

يمكنك العثور على مثال كامل لمجموعة اختبار مكونات WebdriverIO لـ Preact في مستودع الأمثلة الخاص بنا.