𝗧𝗲𝘀𝘁𝗶𝗻𝗴 𝗮𝗻𝗱 𝗗𝗲𝗯𝘂𝗴𝗴𝗶𝗻𝗴 𝗥𝗲𝗮𝗰𝘁 𝗔𝗽𝗽𝘀

Berhenti menebak apakah kode Anda berfungsi. Gunakan pengujian untuk membangun kepercayaan diri.

Kebanyakan pengembang melewatkan pengujian karena mereka merasa pengaturannya terlalu sulit. Mereka menganggap pengujian sebagai beban, bukan sebagai jaring pengaman.

Anda tidak menulis pengujian untuk komputer. Anda menulis pengujian untuk diri Anda di masa depan. Saat Anda mengubah sebuah fungsi pada jam 2 pagi, pengujian akan segera memberi tahu Anda jika Anda merusak sesuatu.

Anggaplah pengujian sebagai sebuah piramida:

• Unit Tests: Menguji satu fungsi atau komponen. Ini cepat dan jumlahnya banyak. • Integration Tests: Menguji bagaimana bagian-bagian bekerja bersama. Ini memberi Anda kepercayaan diri yang tinggi. • E2E Tests: Menguji aplikasi secara penuh di browser. Gunakan ini hanya untuk alur kritis seperti login atau checkout.

Aturan emas React Testing Library: Uji apa yang dilihat pengguna.

Jangan menguji variabel state. Jangan menguji class CSS. Jangan menguji logika internal. Uji tombol, teks, dan input. Jika pengguna tidak dapat melihatnya, jangan mengujinya.

Ikuti pola Arrange, Act, Assert:

  • Arrange: Render komponen Anda.
  • Act: Klik sebuah tombol atau ketik di sebuah field.
  • Assert: Periksa apakah teks yang benar muncul di layar.

Untuk kode async seperti panggilan API, gunakan waitFor. Ini memungkinkan pengujian Anda menunggu data dimuat sebelum memeriksa hasilnya.

Jika aplikasi Anda crash di produksi, gunakan Error Boundaries. Ini mencegah satu komponen yang rusak mengubah seluruh halaman Anda menjadi layar putih. Ini menyediakan fallback yang halus bagi pengguna Anda.

Checklist debugging cepat:

  • Periksa konsol browser untuk melihat error.
  • Periksa tab Network untuk melihat respons API.
  • Gunakan React DevTools untuk memeriksa props dan state.
  • Periksa apakah Anda melakukan mutasi state secara langsung.
  • Verifikasi array dependensi useEffect Anda.

Fokuslah pada pengujian hal-hal yang penting. Anda tidak memerlukan cakupan (coverage) 100%. Anda perlu mencakup fitur-fitur yang akan berdampak buruk jika gagal.

Sumber: https://dev.to/kushang_tailor/testing-debugging-react-apps-write-code-you-can-actually-trust-5334