اختبار وحدات CSS باستخدام Jest

يتحقق اختبار الوحدات لـ CSS برمجيًا من الأنماط المحسوبة، وتطبيق الأصناف، وسلوك التخطيط. كما يكتشف تراجعات منطق CSS، مثل تطبيق الصنف الخطأ أو فقدان المُعدِّل، من دون الحاجة إلى لقطة شاشة من المتصفح أو فحص بصري يدوي.

يستخدم Jest‏ JSDOM افتراضيًا، وهو يوفر دعمًا محدودًا لـ CSS — إذ لا يحسب التخطيط ولا يقيّم المحددات المعقدة. ويكفي JSDOM لاختبار وجود الأصناف والأنماط المضمّنة، أما لاختبار الخصائص المحسوبة فاستخدم jest-environment-jsdom مع محاكيات وحدات CSS.

اعرض مكونًا وتحقّق من تطبيق أصناف CSS الصحيحة بناءً على الخصائص أو الحالة. ويؤكد ذلك أن منطق الأصناف الشرطي (active وdisabled وerror variant) يعمل بصورة صحيحة من دون التحقق من قيم أنماط محددة.

يحوّل Jest عمليات استيراد وحدات CSS باستخدام identity-obj-proxy. يعيد هذا الوكيل سلسلة اسم الصنف لأي خاصية يتم الوصول إليها: تعيد styles.primary القيمة "primary". وتتحقق الاختبارات من أسماء الأصناف من دون الحاجة إلى تطبيق CSS حقيقي.

بالنسبة إلى مشاريع Styled Components، تضيف jest-styled-components مُطابِق toHaveStyleRule. اختبر أن المكون المنسّق يطبّق قيم خصائص CSS الصحيحة بناءً على الخصائص، من دون الحاجة إلى متصفح حقيقي لحساب الأنماط.

يوسّع jest-dom Jest بمطابقات خاصة بـ DOM: toHaveStyle (يتحقق من النمط المضمّن أو المحسوب)، وtoHaveClass (يتحقق من قائمة الأصناف)، وtoBeVisible (يتحقق من display/visibility/opacity). وتجعل هذه المطابقات تأكيدات CSS واضحة وقابلة للتعبير.

تلتقط لقطات المكونات الترميز المعروض، بما في ذلك أسماء الأصناف. وتظهر عمليات إعادة تسمية وحدات CSS أو التغييرات في منطق الأصناف الشرطي على شكل فروقات في اللقطات. وهذا مفيد لاكتشاف تغييرات الأصناف غير المقصودة بسرعة، لكنه يتطلب انضباطًا دقيقًا في مراجعة اللقطات.

لا يستطيع Jest حساب التخطيط (offsetWidth وgetBoundingClientRect)، أو تقييم استعلامات الوسائط، أو تشغيل حركات CSS. وتتطلب هذه المهام بيئة متصفح حقيقية عبر Playwright أو Cypress. وتُعد اختبارات CSS في Jest مكملة لا بديلة عن الاختبار المستند إلى المتصفح.

اضبط الخصائص المخصصة في CSS على عنصر حاوية داخل الاختبارات: element.style.setProperty("--color-primary", "red"). واقرأ القيم المحسوبة باستخدام getComputedStyle(el).getPropertyValue("--color-primary"). يدعم JSDOM قراءة الخصائص المخصصة، لكنه لا يدعم التتالي.

تحقّق من إضافة أصناف تشغيل الحركة وإزالتها في الأوقات الصحيحة: اختبر أن مكون النافذة المنبثقة يضيف الصنف animate-enter عند الفتح، والصنف animate-exit قبل إلغاء تركيبه. أما CSS الخاص بالحركة نفسها فيُختبر باستخدام VRT.

يوجد منطق CSS في JavaScript، مثل سلاسل الأصناف الشرطية، وقيم موفّر السمات، وإنشاء كائنات الأنماط. وتغطي تغطية Jest (Istanbul) منطق CSS هذا المكتوب بـ JavaScript. اكتب اختبارات تغطي جميع الفروع، لضمان اختبار كل مجموعة من الأشكال والحالات.

ماذا تفعل identity-obj-proxy عند استخدامها مع وحدات CSS في Jest؟

يتحقق اختبار وحدات CSS باستخدام Jest من منطق تطبيق الأصناف، والتنسيق الشرطي، وسلوك وحدات CSS من دون متصفح حقيقي. استخدم identity-obj-proxy لوحدات CSS، وjest-styled-components لـ Styled Components، ومطابقات jest-dom لكتابة تأكيدات واضحة. واجمع بينها وبين VRT لتغطية شاملة لجودة CSS.