Jest ile CSS Birim Testi

CSS birim sınaması, hesaplanan stilleri, sınıf uygulamasını ve düzen davranışını programlı olarak doğrular. Tarayıcı ekran görüntüsü veya elle yapılan görsel inceleme gerektirmeden CSS mantığı gerilemelerini (yanlış sınıf uygulanması, eksik değiştirici) yakalar.

Jest, varsayılan olarak sınırlı CSS desteğine sahip JSDOM'u kullanır; düzeni hesaplamaz veya karmaşık seçicileri değerlendirmez. Temel sınıf varlığı ve satır içi stil sınaması için JSDOM yeterlidir; hesaplanan özellikleri sınamak için CSS modülü taklitleriyle jest-environment-jsdom kullanın.

Bir bileşeni oluşturun ve özelliklere veya duruma göre doğru CSS sınıflarının uygulandığını doğrulayın. Bu, belirli stil değerlerini doğrulamadan koşullu sınıf mantığının (etkin, devre dışı, hata çeşidi) doğru çalıştığını gösterir.

Jest, CSS Modülü içe aktarmalarını identity-obj-proxy kullanarak dönüştürür. Bu vekil, erişilen her özellik için sınıf adı dizesini döndürür: styles.primary, "primary" değerini döndürür. Sınamalar, gerçek CSS'nin uygulanmasına gerek kalmadan sınıf adlarını doğrular.

Styled Components projeleri için jest-styled-components, bir toHaveStyleRule eşleştiricisi ekler. Gerçek bir tarayıcının stilleri hesaplamasına gerek kalmadan, stillendirilmiş bir bileşenin özelliklere göre doğru CSS özellik değerlerini uyguladığını sınayın.

jest-dom, Jest'i DOM'a özgü eşleştiricilerle genişletir: toHaveStyle (satır içi veya hesaplanan stili denetler), toHaveClass (sınıf listesini denetler), toBeVisible (display/visibility/opacity değerlerini denetler). Bunlar CSS doğrulamalarını okunabilir ve ifade gücü yüksek hâle getirir.

Bileşen görüntüleri, sınıf adları da dâhil olmak üzere oluşturulan işaretlemeyi yakalar. CSS Modülü yeniden adlandırmaları veya koşullu sınıf mantığındaki değişiklikler, görüntü farkları olarak görünür. İstenmeyen sınıf değişikliklerini hızla yakalamak için kullanışlıdır; ancak görüntüleri dikkatle inceleme disiplini gerektirir.

Jest düzeni hesaplayamaz (offsetWidth, getBoundingClientRect), medya sorgularını değerlendiremez veya CSS animasyonlarını çalıştıramaz. Bunlar için Playwright veya Cypress aracılığıyla gerçek bir tarayıcı ortamı gerekir. Jest CSS sınamaları, tarayıcı tabanlı sınamaların tamamlayıcısıdır; onların yerine geçmez.

Sınamalarda bir kapsayıcı element üzerinde CSS özel özelliklerini ayarlayın: element.style.setProperty("--color-primary", "red"). Hesaplanan değerleri getComputedStyle(el).getPropertyValue("--color-primary") ile okuyun. JSDOM, özel özelliklerin okunmasını destekler ancak basamaklı uygulamayı desteklemez.

Animasyonu tetikleyen sınıfların doğru zamanda eklenip kaldırıldığını doğrulayın: bir iletişim penceresi bileşeninin açılırken animate-enter sınıfını, kaldırılmadan önce de animate-exit sınıfını eklediğini sınayın. Animasyon CSS'si VRT aracılığıyla sınanır.

CSS mantığı JavaScript'te bulunur: koşullu sınıf dizeleri, tema sağlayıcısı değerleri ve stil nesnesi oluşturma. Jest kapsamı (Istanbul), bu JavaScript CSS mantığını kapsar. Her dalı kapsayacak sınamalar yazın; böylece her çeşit ve durum birleşiminin kullanıldığı garanti edilir.

Jest'te CSS Modülleriyle kullanıldığında identity-obj-proxy ne yapar?

Jest ile CSS birim sınaması, gerçek bir tarayıcı olmadan sınıf uygulama mantığını, koşullu stillendirmeyi ve CSS Modülü davranışını doğrular. CSS Modülleri için identity-obj-proxy, Styled Components için jest-styled-components ve okunabilir doğrulamalar için jest-dom eşleştiricilerini kullanın. Kapsamlı CSS kalite kapsamı için bunları VRT ile birleştirin.