سالیدجی‌اس

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 را در مخزن نمونه ما پیدا کنید.