CSS Academy · पाठ

Jest से CSS यूनिट परीक्षण

Jest और संबंधित मैचर का उपयोग करके CSS-in-JS आउटपुट का परीक्षण करें और स्टाइल वाले घटकों के स्नैपशॉट लें।

पाठ 3, कुल 4 में से13 चरण

Jest से CSS यूनिट परीक्षण, CoddyKit पर CSS Academy का एक निःशुल्क पाठ है। यह 4 में से 3वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह CSS Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

Jest के साथ CSS का परीक्षण क्यों?

CSS इकाई परीक्षण, परिकलित शैलियों, वर्गों के अनुप्रयोग और लेआउट व्यवहार को प्रोग्राम के माध्यम से सत्यापित करता है। यह CSS लॉजिक के प्रतिगमन (गलत वर्ग लागू होना, संशोधक का छूट जाना) पकड़ता है, जिसके लिए ब्राउज़र स्क्रीनशॉट या मैन्युअल दृश्य निरीक्षण आवश्यक नहीं होता।

JSDOM और CSS समर्थन

Jest डिफ़ॉल्ट रूप से JSDOM का उपयोग करता है, जिसमें CSS समर्थन सीमित है—यह लेआउट की गणना या जटिल चयनकर्ताओं का मूल्यांकन नहीं करता। बुनियादी वर्ग-उपस्थिति और इनलाइन शैली परीक्षण के लिए JSDOM पर्याप्त है; परिकलित प्रॉपर्टी परीक्षण के लिए CSS मॉड्यूल मॉक के साथ jest-environment-jsdom का उपयोग करें।

वर्ग अनुप्रयोग का परीक्षण

किसी घटक को रेंडर करें और प्रॉप्स या स्थिति के आधार पर सही CSS वर्ग लागू होने की पुष्टि करें। इससे सशर्त वर्ग लॉजिक (सक्रिय, अक्षम, त्रुटि वैरिएंट) सही ढंग से काम करने की पुष्टि होती है, बिना विशिष्ट शैली मानों की पुष्टि किए।

<button class="btn-primary">Primary Button</button>

परीक्षणों में CSS मॉड्यूल

Jest CSS मॉड्यूल इंपोर्ट को identity-obj-proxy का उपयोग करके रूपांतरित करता है। यह प्रॉक्सी एक्सेस की गई किसी भी प्रॉपर्टी के लिए वर्ग नाम की स्ट्रिंग लौटाती है: styles.primary से "primary" मिलता है। वास्तविक CSS लागू किए बिना परीक्षण वर्ग नामों की पुष्टि करते हैं।

jest-styled-components

Styled Components प्रोजेक्ट्स के लिए jest-styled-components, toHaveStyleRule मिलानकर्ता जोड़ता है। परीक्षण करें कि कोई स्टाइल किया गया घटक प्रॉप्स के आधार पर सही CSS प्रॉपर्टी मान लागू करता है, जिसके लिए शैलियों की गणना करने वाले वास्तविक ब्राउज़र की आवश्यकता नहीं होती।

<button class="btn">Enabled</button>
<button class="btn" disabled>Disabled (0.5 opacity)</button>

@testing-library/jest-dom

jest-dom, Jest में DOM-विशिष्ट मिलानकर्ता जोड़ता है: toHaveStyle (इनलाइन या परिकलित शैली की जाँच करता है), toHaveClass (वर्ग सूची की जाँच करता है), toBeVisible (display/visibility/opacity की जाँच करता है)। ये CSS दावों को पढ़ने योग्य और अभिव्यक्तिपूर्ण बनाते हैं।

वर्ग नामों का स्नैपशॉट परीक्षण

घटक स्नैपशॉट, वर्ग नामों सहित रेंडर किए गए मार्कअप को कैप्चर करते हैं। CSS मॉड्यूल के नाम बदलने या सशर्त वर्ग लॉजिक में हुए बदलाव स्नैपशॉट अंतरों के रूप में दिखाई देते हैं। अनचाहे वर्ग बदलावों को जल्दी पकड़ने के लिए यह उपयोगी है, लेकिन स्नैपशॉट की सावधानीपूर्वक समीक्षा करने का अनुशासन आवश्यक है।

Jest CSS परीक्षण की सीमाएँ

Jest लेआउट की गणना (offsetWidth, getBoundingClientRect), मीडिया क्वेरी का मूल्यांकन या CSS एनीमेशन नहीं चला सकता। इनके लिए Playwright या Cypress के माध्यम से वास्तविक ब्राउज़र परिवेश आवश्यक है। Jest CSS परीक्षण, ब्राउज़र-आधारित परीक्षण के पूरक हैं—उसका विकल्प नहीं।

CSS कस्टम प्रॉपर्टीज़ का परीक्षण

परीक्षणों में किसी कंटेनर तत्व पर CSS कस्टम प्रॉपर्टीज़ सेट करें: element.style.setProperty("--color-primary", "red")। getComputedStyle(el).getPropertyValue("--color-primary") से परिकलित मान पढ़ें। JSDOM कस्टम प्रॉपर्टी पढ़ने का समर्थन करता है, लेकिन कैस्केड का नहीं।

एनीमेशन वर्गों का परीक्षण

पुष्टि करें कि एनीमेशन ट्रिगर वर्ग सही समय पर जोड़े और हटाए जाते हैं: परीक्षण करें कि कोई मोडल घटक खुलने पर animate-enter वर्ग जोड़ता है और अनमाउंट होने से पहले animate-exit वर्ग जोड़ता है। एनीमेशन CSS का परीक्षण VRT के माध्यम से किया जाता है।

CSS लॉजिक का कवरेज

CSS लॉजिक JavaScript में रहता है: सशर्त वर्ग स्ट्रिंग, थीम प्रदाता के मान और शैली ऑब्जेक्ट का निर्माण। Jest कवरेज (Istanbul) इस JavaScript CSS लॉजिक को कवर करता है। सभी शाखाओं को कवर करने के लिए परीक्षण लिखें, ताकि हर वैरिएंट और अवस्था के संयोजन का अभ्यास हो।

ज्ञान-जाँच

Jest में CSS मॉड्यूल के साथ उपयोग किए जाने पर identity-obj-proxy क्या करता है?

इंटरैक्टिव पाठ में इसका उत्तर दें

सारांश

Jest के साथ CSS इकाई परीक्षण, वास्तविक ब्राउज़र के बिना वर्ग अनुप्रयोग लॉजिक, सशर्त शैलीकरण और CSS मॉड्यूल के व्यवहार को सत्यापित करता है। CSS मॉड्यूल के लिए identity-obj-proxy, Styled Components के लिए jest-styled-components और पढ़ने योग्य दावों के लिए jest-dom मिलानकर्ताओं का उपयोग करें। व्यापक CSS गुणवत्ता कवरेज के लिए इन्हें VRT के साथ मिलाएँ।

शुरुआत निःशुल्क

एआई शिक्षक के साथ CSS सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 40
पाठ: 159

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “Jest से CSS यूनिट परीक्षण” पाठ निःशुल्क है?

हाँ—“Jest से CSS यूनिट परीक्षण” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और CSS Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“Jest से CSS यूनिट परीक्षण” में मैं क्या सीखूँगा?

Jest और संबंधित मैचर का उपयोग करके CSS-in-JS आउटपुट का परीक्षण करें और स्टाइल वाले घटकों के स्नैपशॉट लें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ CSS Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या CSS Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर CSS Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 3वाँ पाठ है।

“Jest से CSS यूनिट परीक्षण” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस CSS Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर CSS Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← CSS Academy पर वापस जाएँ