Pengujian Unit CSS dengan Jest

Pengujian unit CSS memverifikasi gaya terhitung, penerapan kelas, dan perilaku tata letak secara terprogram. Pengujian ini menangkap regresi logika CSS (kelas yang salah diterapkan, pengubah yang hilang) tanpa memerlukan tangkapan layar peramban atau pemeriksaan visual manual.

Jest menggunakan JSDOM secara bawaan, yang memiliki dukungan CSS terbatas—JSDOM tidak menghitung tata letak atau mengevaluasi pemilih yang kompleks. Untuk pengujian keberadaan kelas dasar dan gaya sebaris, JSDOM sudah memadai; untuk pengujian properti terhitung, gunakan jest-environment-jsdom dengan tiruan modul CSS.

Render sebuah komponen dan pastikan kelas CSS yang benar diterapkan berdasarkan properti atau keadaannya. Hal ini memverifikasi bahwa logika kelas bersyarat (aktif, dinonaktifkan, varian kesalahan) berfungsi dengan benar tanpa memverifikasi nilai gaya tertentu.

Jest mengubah impor Modul CSS menggunakan identity-obj-proxy. Proksi ini mengembalikan string nama kelas untuk setiap properti yang diakses: styles.primary mengembalikan "primary". Pengujian dapat memverifikasi nama kelas tanpa memerlukan CSS asli untuk diterapkan.

Untuk proyek Styled Components, jest-styled-components menambahkan pencocok toHaveStyleRule. Uji bahwa komponen bergaya menerapkan nilai properti CSS yang tepat berdasarkan propertinya tanpa memerlukan peramban asli untuk menghitung gaya.

jest-dom memperluas Jest dengan pencocok khusus DOM: toHaveStyle (memeriksa gaya sebaris atau terhitung), toHaveClass (memeriksa daftar kelas), toBeVisible (memeriksa tampilan/visibilitas/opasitas). Pencocok ini membuat penegasan CSS mudah dibaca dan ekspresif.

Tangkapan komponen merekam markah hasil render, termasuk nama kelas. Penggantian nama Modul CSS atau perubahan logika kelas bersyarat akan terlihat sebagai perbedaan tangkapan. Cara ini berguna untuk segera menangkap perubahan kelas yang tidak diinginkan, tetapi memerlukan disiplin dalam meninjau tangkapan.

Jest tidak dapat menghitung tata letak (offsetWidth, getBoundingClientRect), mengevaluasi kueri media, atau menjalankan animasi CSS. Hal-hal tersebut memerlukan lingkungan peramban asli melalui Playwright atau Cypress. Pengujian CSS dengan Jest merupakan pelengkap, bukan pengganti, pengujian berbasis peramban.

Tetapkan properti kustom CSS pada elemen wadah dalam pengujian: element.style.setProperty("--color-primary", "red"). Baca nilai terhitung dengan getComputedStyle(el).getPropertyValue("--color-primary"). JSDOM mendukung pembacaan properti kustom, tetapi tidak mendukung cascade.

Pastikan kelas pemicu animasi ditambahkan atau dihapus pada waktu yang tepat: uji bahwa komponen modal menambahkan kelas animate-enter saat dibuka dan kelas animate-exit sebelum dilepas dari DOM. CSS animasinya sendiri diuji melalui VRT.

Logika CSS berada di JavaScript: string kelas bersyarat, nilai penyedia tema, dan pembuatan objek gaya. Cakupan Jest (Istanbul) mencakup logika CSS JavaScript ini. Tulis pengujian untuk mencakup semua cabang, sehingga setiap kombinasi varian dan keadaan dijalankan.

Apa yang dilakukan identity-obj-proxy saat digunakan dengan Modul CSS dalam Jest?

Pengujian unit CSS dengan Jest memverifikasi logika penerapan kelas, gaya bersyarat, dan perilaku Modul CSS tanpa peramban asli. Gunakan identity-obj-proxy untuk Modul CSS, jest-styled-components untuk Styled Components, dan pencocok jest-dom untuk penegasan yang mudah dibaca. Gabungkan dengan VRT untuk cakupan mutu CSS yang menyeluruh.