Pengujian Unit CSS dengan Jest

Pengujian unit CSS mengesahkan gaya terhitung, penggunaan kelas dan tingkah laku reka letak secara terprogram. Ia mengesan regresi logik CSS, seperti kelas yang salah digunakan atau pengubah suai yang tiada, tanpa memerlukan tangkapan skrin pelayar atau pemeriksaan visual secara manual.

Jest menggunakan JSDOM secara lalai, yang mempunyai sokongan CSS terhad — ia tidak mengira reka letak atau menilai pemilih yang kompleks. Untuk pengujian asas kehadiran kelas dan gaya sebaris, JSDOM sudah memadai; untuk pengujian sifat terhitung, gunakan jest-environment-jsdom dengan mock modul CSS.

Paparkan komponen dan tegaskan bahawa kelas CSS yang betul digunakan berdasarkan sifat atau keadaan. Hal ini mengesahkan bahawa logik kelas bersyarat, seperti aktif, dilumpuhkan atau variasi ralat, berfungsi dengan betul tanpa menegaskan nilai gaya tertentu.

Jest mengubah import Modul CSS menggunakan identity-obj-proxy. Proksi ini mengembalikan rentetan nama kelas bagi sebarang sifat yang diakses: styles.primary mengembalikan "primary". Pengujian menegaskan nama kelas tanpa memerlukan CSS sebenar digunakan.

Bagi projek Styled Components, jest-styled-components menambahkan pemadan toHaveStyleRule. Uji bahawa komponen bergaya menggunakan nilai sifat CSS yang betul berdasarkan sifat tanpa memerlukan pelayar sebenar untuk mengira gaya.

jest-dom melanjutkan Jest dengan pemadan khusus DOM: toHaveStyle (memeriksa gaya sebaris atau gaya terhitung), toHaveClass (memeriksa senarai kelas) dan toBeVisible (memeriksa paparan/keterlihatan/kelegapan). Pemadan ini menjadikan penegasan CSS mudah dibaca dan jelas.

Tangkapan komponen merekodkan penanda yang dipaparkan, termasuk nama kelas. Penamaan semula Modul CSS atau perubahan logik kelas bersyarat akan muncul sebagai perbezaan tangkapan. Kaedah ini berguna untuk mengesan perubahan kelas yang tidak disengajakan dengan cepat, tetapi memerlukan disiplin semakan tangkapan yang teliti.

Jest tidak dapat mengira reka letak (offsetWidth, getBoundingClientRect), menilai pertanyaan media atau menjalankan animasi CSS. Semua ini memerlukan persekitaran pelayar sebenar melalui Playwright atau Cypress. Pengujian CSS Jest melengkapi — bukan menggantikan — pengujian berasaskan pelayar.

Tetapkan sifat tersuai CSS pada elemen bekas dalam pengujian: element.style.setProperty("--color-primary", "red"). Baca nilai terhitung dengan getComputedStyle(el).getPropertyValue("--color-primary"). JSDOM menyokong pembacaan sifat tersuai tetapi bukan pewarisan bertingkat.

Sahkan bahawa kelas pencetus animasi ditambah atau dibuang pada masa yang betul: uji bahawa komponen modal menambahkan kelas animate-enter apabila dibuka dan kelas animate-exit sebelum dinyahlekapkan. CSS animasi itu sendiri diuji melalui VRT.

Logik CSS berada dalam JavaScript: rentetan kelas bersyarat, nilai penyedia tema dan penjanaan objek gaya. Liputan Jest (Istanbul) meliputi logik CSS JavaScript ini. Tulis pengujian untuk meliputi semua cabang, bagi memastikan setiap gabungan variasi dan keadaan diuji.

Pengujian unit CSS dengan Jest mengesahkan logik penggunaan kelas, penggayaan bersyarat dan tingkah laku Modul CSS tanpa pelayar sebenar. Gunakan identity-obj-proxy untuk Modul CSS, jest-styled-components untuk Styled Components dan pemadan jest-dom bagi penegasan yang mudah dibaca. Gabungkan semuanya dengan VRT untuk liputan kualiti CSS yang menyeluruh.