Menguji dan Menyahpepijat Aplikasi React

Berhenti meneka sama ada kod anda berfungsi. Gunakan pengujian untuk membina keyakinan.

Kebanyakan pembangun melangkau pengujian kerana mereka mendapati persediaannya terlalu sukar. Mereka menganggap pengujian sebagai satu bebanan dan bukannya sebagai jaring keselamatan.

Anda tidak menulis ujian untuk komputer. Anda menulis ujian untuk diri anda di masa hadapan. Apabila anda mengubah fungsi pada jam 2 pagi, ujian akan memberitahu anda dengan segera jika anda telah merosakkan sesuatu.

Anggap pengujian sebagai sebuah piramid:

• Unit Tests: Menguji satu fungsi atau komponen. Ia pantas dan banyak jumlahnya. • Integration Tests: Menguji bagaimana bahagian-bahagian berfungsi bersama. Ini memberikan anda keyakinan yang tinggi. • E2E Tests: Menguji aplikasi sepenuhnya dalam pelayar. Gunakan ini hanya untuk laluan kritikal seperti log masuk atau checkout.

Peraturan emas React Testing Library: Uji apa yang dilihat oleh pengguna.

Jangan uji pemboleh ubah state. Jangan uji kelas CSS. Jangan uji logik dalaman. Uji butang, teks, dan input. Jika pengguna tidak dapat melihatnya, jangan uji ia.

Ikuti corak Arrange, Act, Assert:

  • Arrange: Render komponen anda.
  • Act: Klik butang atau taip dalam medan input.
  • Assert: Semak jika teks yang betul muncul pada skrin.

Untuk kod async seperti panggilan API, gunakan waitFor. Ini membolehkan ujian anda menunggu data dimuatkan sebelum menyemak hasilnya.

Jika aplikasi anda crash dalam production, gunakan Error Boundaries. Ia menghalang satu komponen yang rosak daripada menukarkan keseluruhan halaman anda menjadi skrin putih. Ia menyediakan fallback yang lancar untuk pengguna anda.

Senarai semak penyahpepijatan pantas:

  • Semak konsol pelayar untuk ralat.
  • Semak tab Network untuk melihat respons API.
  • Gunakan React DevTools untuk memeriksa props dan state.
  • Semak jika anda mengubah state secara langsung.
  • Sahkan array kebergantungan useEffect anda.

Fokus pada menguji perkara yang penting. Anda tidak memerlukan liputan (coverage) 100%. Anda perlu meliputi ciri-ciri yang akan mendatangkan masalah jika ia gagal.

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