Pengujian Snapshot HTML

Pengujian cuplikan merekam keluaran yang dirender dari suatu komponen atau halaman pada proses pertama, lalu pada proses berikutnya membandingkan keluaran baru dengan cuplikan yang disimpan. Setiap perubahan pada keluaran HTML menyebabkan pengujian gagal hingga cuplikan tersebut diperbarui secara sengaja.

Pencocok Jest toMatchSnapshot() membuat serialisasi nilai (termasuk JSX yang dirender menjadi HTML) dan membandingkannya dengan berkas yang disimpan. npx jest -u memperbarui cuplikan saat terjadi perubahan yang disengaja. Pengujian berfungsi sebagai jaring pengaman regresi terhadap perubahan rendering yang tidak disengaja.

Storybook Test Runner menjalankan setiap contoh dan mengambil cuplikan keluarannya melalui axe (aksesibilitas) serta serialisasi DOM. Jika digabungkan dengan Chromatic, alat ini menambahkan regresi visual—perbedaan tingkat piksel selain perbedaan DOM.

Percy dan Chromatic mengambil cuplikan halaman yang dirender sebagai gambar dan menampilkan perbedaan visual. Keduanya menangkap regresi CSS yang tidak terlihat oleh cuplikan DOM (pergantian font, penyesuaian margin, atau perubahan warna). Padukan cuplikan DOM (murah, cepat) dengan cuplikan visual (mahal, menyeluruh).

Cuplikan yang berubah "terlalu mudah" menjadi gangguan. Hindari mengambil cuplikan nilai yang tidak stabil (tanggal, id, kunci acak). Gunakan pencocok properti Jest (expect.any(String)) untuk bidang yang memang bervariasi di antara proses. Jaga agar cuplikan tetap kecil dan terfokus.

Perbedaan berkas cuplikan dalam pull request merupakan bahan peninjauan utama. Peninjau memverifikasi bahwa perubahan DOM memang disengaja dan diharapkan—serta menangkap efek berantai yang tidak disengaja dari perubahan CSS "sederhana". Perlakukan perbedaan cuplikan seperti perbedaan lainnya.

Membuat cuplikan untuk perenderan halaman tingkat atas yang sangat besar itu rapuh—setiap perubahan kecil merambat menjadi perbedaan raksasa. Buat cuplikan pada tingkat komponen: setiap Tombol, setiap Kartu, setiap FormField. Perenderan tingkat halaman lebih tepat diuji dengan pengujian regresi visual.

Pilih cara serialisasi: HTML lengkap, DOM yang disederhanakan, hanya properti, atau pohon aksesibilitas. Setiap format menangkap jenis regresi yang berbeda. Untuk komponen antarmuka pengguna, HTML lengkap adalah yang paling menyeluruh; untuk logika yang digerakkan properti, hanya properti lebih hemat dan jarang menghasilkan positif palsu.

Penyebab yang paling umum adalah refaktor yang menghasilkan HTML yang setara tetapi memiliki struktur berbeda. Periksa perbedaannya: jika perubahan itu disengaja dan lebih baik, perbarui cuplikannya. Jika tidak terduga, perbaiki kode yang mendasarinya. Jangan pernah menjalankan jest -u secara membabi buta tanpa pemeriksaan.

Alat regresi visual merender di beberapa peramban dan melaporkan perbedaan khusus peramban. Gunakan ini untuk menemukan CSS yang dirender secara berbeda di Safari dan Chrome—hal yang umum pada fitur tata letak baru dalam fase adopsi awal. Tanpa cuplikan lintas peramban, regresi semacam itu hanya ditemukan melalui QA manual.

Pengujian cuplikan diperlukan, tetapi belum memadai. Pengujian ini menangkap perubahan perenderan yang tidak disengaja, tetapi bukan kesalahan logika (mengeklik tombol menghasilkan tindakan yang benar). Padukan dengan pengujian unit untuk perilaku dan pengujian menyeluruh dari awal hingga akhir untuk alur pengguna—setiap lapisan menangkap kegagalan yang berbeda.

Pengujian cuplikan cepat—pengujian ini membandingkan teks atau berkas. Pengujian regresi visual lebih lambat (merender piksel, membandingkan gambar, dan sering kali berjalan di beberapa peramban). Jalankan cuplikan pada setiap proses integrasi berkelanjutan; jalankan regresi visual pada setiap PR, tetapi mungkin tidak pada setiap komit, bergantung pada anggaran integrasi berkelanjutan.

Mengapa pengujian cuplikan DOM biasanya dilengkapi dengan pengujian regresi visual seperti Percy atau Chromatic?

Pengujian cuplikan menangkap HTML hasil perenderan pada proses pertama dan menandai setiap perubahan pada proses berikutnya. Gunakan Jest toMatchSnapshot untuk DOM komponen, Storybook Test Runner untuk cerita, dan Percy/Chromatic untuk regresi visual pada tingkat piksel. Buat cuplikan pada tingkat komponen (bukan tingkat halaman), kecualikan nilai yang tidak stabil, dan tinjau perbedaannya dengan saksama dalam PR. Gabungkan dengan pengujian unit dan pengujian menyeluruh dari awal hingga akhir untuk cakupan lengkap.