Testing Overview

Anda dapat mengetes komponen React mirip dengan mengetes kode JavaScript lainnya.

Ada beberapa cara untuk mengeteskomponen pada React. Secara umum, terbagi menjadi dua kategori:

• Rendering component trees di dalam environment tes yang sudah disederhanakan dan ditegaskan pada keluarannya.
• Menjalankan aplikasi lengkap di dalam environment peramban asli (juga dikenal sebagai tes “end-to-end”).

Bagian dokumentasi ini berfokus pada strategi tes untuk kasus pertama. Sementara tes end-to-end secara menyeluruh bisa sangat berguna untuk mencegah regresi terhadap alur kerja yang penting, tes semacam itu tidak diperhatikan terutama pada komponen React, dan berada di luar cakupan bagian ini.

Tradeoffs

Saat memilih kakas pengetesan, perlu mempertimbangkan beberapa tradeoffs:

• Kecepatan iterasi vs environment yang realistis: Beberapa kakas menawarkan feedback loop yang sangat cepat antara membuat sebuah perubahan dan melihat hasilnya, tetapi tidak memodelkan sifat dari peramban dengan tepat. Tools lain mungkin menggunakan environment peramban yang asli, tetapi mengurangi kecepatan iterasi dan lebih flakier pada server integrasi berkelanjutan.
• Seberapa banyak mock: Dengan komponen, perbedaan antara tes “unit” dan tes “integrasi” bisa tidak sesuai. Jika Anda mengetes sebuah form, haruskah tes yang dilakukan juga menguji tombol yang ada di dalamnya? Atau haruskah komponen memiliki rangkaian tes sendiri? Haruskah refactoring pada tombol merusak tes pada form?

Jawaban yang berbeda mungkin berlaku untuk tim dan produk yang berbeda.

Kakas yang direkomendasikan

Jest adalah test runner pada JavaScript yang memungkinkan Anda mengakses DOM melalui jsdom. Sementara jsdom hanyalah perkiraan cara kerja browser, seringkali cukup baik mengetes komponen pada React. Jest memberikan kecepatan iterasi yang bagus dikombinasikan dengan fitur-fitur yang powerful seperti mocking modules dan timers sehingga Anda dapat memiliki kontrol lebih pada kode yang dijalankan.

React Testing Library adalah seperangkat helpers yang memungkinkan Anda mengetes komponen pada React tanpa bergantung pada detail implementasinya. Pendekatan ini membuat refactoring menjadi mudah dan juga mendorong Anda untuk menerapkan best practices untuk aksesbilitas. Mungkin tidak memberikan cara untuk me-render secara “dangkal” pada sebuah komponen tanpa anak, test runner seperti Jest yang memungkinkan Anda melakukan mocking.

Pembelajaran lainnya

Bagian ini terbagi dalam dua halaman:

• Recipes: Pola yang sering dijumpai pada saat menulis tes pada komponen React.
• Environments: Apa yang harus dipertimbangkan ketika menyiapkan environment tes untuk komponen React.