سوليد جيه إس

SolidJS هو إطار عمل لبناء واجهات المستخدم بتفاعلية بسيطة وعالية الأداء. يمكنك اختبار مكونات SolidJS مباشرة في متصفح حقيقي باستخدام WebdriverIO ومشغل المتصفح الخاص به.

الإعداد

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

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

معلومات

إذا كنت تستخدم بالفعل Vite كخادم تطوير، يمكنك أيضًا إعادة استخدام التكوين الخاص بك في vite.config.ts داخل تكوين WebdriverIO الخاص بك. لمزيد من المعلومات، راجع viteConfig في خيارات المشغل.

يتطلب الإعداد المسبق لـ SolidJS تثبيت vite-plugin-solid:

npm

npm install --save-dev vite-plugin-solid

Yarn

yarn add --dev vite-plugin-solid

pnpm

pnpm add --save-dev vite-plugin-solid

يمكنك بعد ذلك بدء الاختبارات عن طريق تشغيل:

npx wdio run ./wdio.conf.js

كتابة الاختبارات

بفرض أن لديك مكون SolidJS التالي:

./components/Component.tsx

import { createSignal } from 'solid-js'

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

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

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

export default App

في اختبارك استخدم طريقة render من solid-js/web لإرفاق المكون بصفحة الاختبار. للتفاعل مع المكون، نوصي باستخدام أوامر WebdriverIO لأنها تتصرف بشكل أقرب إلى تفاعلات المستخدم الفعلية، على سبيل المثال:

app.test.tsx

import { expect } from '@wdio/globals'
import { render } from 'solid-js/web'

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

describe('Solid Component Testing', () => {
    /**
     * ensure we render the component for every test in a
     * new root container
     */
    let root: Element
    beforeEach(() => {
        if (root) {
            root.remove()
        }

        root = document.createElement('div')
        document.body.appendChild(root)
    })

    it('Test theme button toggle', async () => {
        render(<App />, root)
        const buttonEl = await $('button')

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

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