سفلت

Svelte هو نهج جديد وجذري لبناء واجهات المستخدم. في حين أن الأطر التقليدية مثل React وVue تقوم بمعظم عملها في المتصفح، يقوم Svelte بنقل هذا العمل إلى خطوة تجميع تحدث عند بناء تطبيقك. يمكنك اختبار مكونات Svelte مباشرة في متصفح حقيقي باستخدام WebdriverIO ومشغّل المتصفح الخاص به.

الإعداد

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

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

معلومات

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

يتطلب الإعداد المسبق لـ Svelte تثبيت @sveltejs/vite-plugin-svelte. كما نوصي باستخدام Testing Library لعرض المكون في صفحة الاختبار. لذلك، ستحتاج إلى تثبيت التبعيات الإضافية التالية:

npm

npm install --save-dev @testing-library/svelte @sveltejs/vite-plugin-svelte

Yarn

yarn add --dev @testing-library/svelte @sveltejs/vite-plugin-svelte

pnpm

pnpm add --save-dev @testing-library/svelte @sveltejs/vite-plugin-svelte

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

npx wdio run ./wdio.conf.js

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

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

./components/Component.svelte

<script>
    export let name

    let buttonText = 'Button'

    function handleClick() {
      buttonText = 'Button Clicked'
    }
</script>

<h1>Hello {name}!</h1>
<button on:click="{handleClick}">{buttonText}</button>

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

svelte.test.js

import expect from 'expect'

import { render, fireEvent, screen } from '@testing-library/svelte'
import '@testing-library/jest-dom'

import Component from './components/Component.svelte'

describe('Svelte Component Testing', () => {
    it('changes button text on click', async () => {
        render(Component, { name: 'World' })
        const button = await $('button')
        await expect(button).toHaveText('Button')
        await button.click()
        await expect(button).toHaveText('Button Clicked')
    })
})

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