Vitest + RTL اختبار Vitest + RTL

آخر تحديث: 2026-11-03

Vitest + RTL اختبار Vitest + RTL

Vitest عدّاء اختبار سريع جدًا يشارك إعداده مع Vite، وReact Testing Library تتيح لك اختبار المكوّنات «كما يفعل المستخدم»: render يركّب، وgetByRole يستعلم، وuserEvent يُحاكي التفاعل، وتستهدف التأكيدات السلوك لا تفاصيل التنفيذ. هذا التحوّل هو ما يجعل الاختبارات صامدة أمام إعادة البناء. وبما أن العدّاء يعيد استخدام خط أنابيب Vite، فنفس رسم الوحدات الذي يشغّل خادم التطوير يشغّل حزمة الاختبارات.

ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.

📝 الصيغة

import { describe, it, expect } from 'vitest'
import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import Counter from './Counter'

describe('Counter', () => {
  it('increments the number after a click', async () => {
    render(<Counter />)
    expect(screen.getByRole('status')).toHaveTextContent('0')
    await userEvent.click(screen.getByRole('button', { name: '+1' }))
    expect(screen.getByRole('status')).toHaveTextContent('1')
  })
})

القيمة المرجعة：تنظّم describe وit الحالات؛ وrender تركّب المكوّن وتُعيد مقابض الاستعلام؛ وscreen.getByRole وأخواتها تستعلم العناصر دلاليًا؛ وexpect تُؤكّد النتيجة.

▶ مثال

المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.

الناتج：

يتغيّر Counter الأعلى مع الأزرار، بينما يضيء لوح الحالات أدناه إطارًا تلو الآخر — سريان RTL لاستعلام getByRole مع تأكيد expect ناجح (عرض توضيحي محاكى).

💡 النقاط الأساسية

🏷️ المزيد من البيانات والهندسة

💡 حالات ذات صلة

📚 دروس ذات صلة

❓ الأسئلة الشائعة

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

من نحن