Tes menulis bisa jadi membosankan dan berulang. Anda mungkin merasa membuang waktu berharga yang lebih suka Anda gunakan untuk mengerjakan fitur. Namun, jika Anda ingin mengirimkan aplikasi yang Anda yakini, Anda harus menulis tes.
Pengujian memungkinkan Anda untuk menangkap kesalahan dan bug yang mungkin akan Anda kirim ke pengguna. Oleh karena itu, ini meningkatkan pengalaman pengguna aplikasi Anda dan menyelamatkan Anda dari keharusan men-debug kode produksi.
Anda dapat dengan mudah menulis pengujian di React menggunakan Jest dan Pustaka Pengujian React.
Apa yang Harus Anda Uji di React?
Memutuskan apa yang akan diuji bisa jadi sulit. Meskipun pengujiannya bagus, Anda tidak boleh menguji setiap baris dalam aplikasi React Anda. Melakukannya akan meninggalkan Anda dengan tes rapuh yang rusak dengan sedikit perubahan pada aplikasi Anda.
Sebagai gantinya, Anda hanya boleh menguji implementasi pengguna akhir. Ini berarti menguji bagaimana pengguna akhir akan menggunakan aplikasi Anda alih-alih menguji cara kerja bagian dalam aplikasi Anda.
Selanjutnya, pastikan Anda menguji komponen yang paling sering digunakan dalam aplikasi Anda, seperti laman landas atau komponen masuk. Juga, uji fitur terpenting dalam aplikasi Anda. Misalnya, ini mungkin fitur yang menghasilkan uang, seperti fitur keranjang belanja.
Saat memutuskan apa yang akan diuji, satu hal yang perlu diingat adalah jangan pernah menguji fungsionalitas yang ditangani oleh React sendiri. Misalnya, alih-alih menguji validitas alat peraga, Anda dapat menggunakan React PropTypes.
Menguji Komponen Tombol
Ingat, Anda hanya boleh menguji implementasi komponen oleh pengguna akhir dan bukan cara kerja internalnya. Untuk komponen tombol, ini berarti memverifikasi bahwa itu dirender tanpa mogok dan ditampilkan dengan benar.
Buat file baru di src folder bernama Tombol.js dan tambahkan kode berikut.
fungsiTombol({nilai}) {
kembali (
<tombol>{nilai}</button>
)
}
eksporbawaan Tombol
Button.js menerima prop yang disebut nilai dan menggunakannya sebagai nilai tombol.
Menulis Tes Pertama Anda
SEBUAH buat-reaksi-aplikasi-aplikasi sudah diinstal sebelumnya dengan Jest dan Pustaka Pengujian Bereaksi. Jest adalah library pengujian ringan dengan fungsi ejekan dan pernyataan bawaan. Ini bekerja dengan banyak Kerangka kerja JavaScript. Pustaka Pengujian React, di sisi lain, menyediakan fungsi untuk membantu Anda menguji bagaimana pengguna berinteraksi dengan komponen.
Buat file baru bernama Button.test.js di folder src. Secara default, Jest mengidentifikasi file yang diakhiri dengan .test.js sebagai file uji dan secara otomatis menjalankannya. Pilihan lain adalah menambahkan file pengujian Anda ke folder bernama __tes__.
Tambahkan kode berikut di Button.test.js untuk membuat tes pertama.
impor { memberikan } dari '@testing-library/react';
impor Tombol dari '../Tombol';
menggambarkan('Komponen tombol', () => {
uji('Membuat komponen tombol tanpa mogok', () => {
memberikan(<Tombol />);
});
})
Tes ini pertama-tama mendefinisikan tes tentang penggunaan blok deskripsi yang disediakan oleh Jest. Blok ini berguna untuk mengelompokkan tes terkait. Di sini, Anda mengelompokkan tes untuk komponen Button.
Di dalam blok deskripsi, Anda memiliki tes pertama di blok tes. Blok ini menerima string yang menjelaskan apa yang harus dilakukan pengujian dan fungsi panggilan balik yang menjalankan ekspektasi.
Dalam contoh ini, pengujian harus merender komponen Button tanpa mogok. Metode render dari React Testing Library melakukan pengujian yang sebenarnya. Ini memeriksa apakah komponen Button merender dengan benar. Jika ya, tes lulus, jika tidak maka gagal.
Menggunakan Peran untuk Menemukan Tombol
Terkadang Anda ingin memeriksa apakah elemen sudah terpasang. Metode layar memiliki fungsi getByRole() yang dapat Anda gunakan untuk mengambil elemen dari DOM.
screen.getByRole('tombol')
Anda kemudian dapat menggunakan elemen yang telah Anda ambil untuk melakukan pengujian seperti memeriksa apakah elemen tersebut ada dalam dokumen atau telah dirender dengan benar.
getByRole() adalah salah satu di antara banyak kueri yang dapat Anda gunakan untuk memilih elemen dalam suatu komponen. Lihat jenis kueri lainnya di The Pustaka Pengujian Bereaksi Panduan "Kueri Mana yang Harus Saya Gunakan". Juga selain peran "tombol", kebanyakan elemen HTML semantik memiliki peran implisit yang dapat Anda gunakan untuk melakukan kueri. Temukan daftar peran dari dokumen MDN.
Tambahkan yang berikut ini ke blok pengujian untuk memverifikasi render komponen.
uji('Membuat tombol tanpa mogok', () => {
memberikan(<Nilai tombol="Daftar" />);
harapkan (screen.getByRole('tombol')).toBeInTheDocument()
});
Matcher toBeInTheDocument() memeriksa apakah elemen tombol ada dalam dokumen.
Harapkan Tombol untuk Render dengan Benar
Komponen Button menerima nilai prop dan menampilkannya. Agar dapat dirender dengan benar, nilai yang ditampilkan harus sama dengan nilai yang Anda berikan.
Buat blok tes baru dan tambahkan kode berikut.
uji('Membuat tombol dengan benar', () => {
memberikan(<Nilai tombol="Gabung" />);
harapkan (screen.getByRole('tombol')).toHaveTextContent("Gabung")
})
Perhatikan bahwa Anda tidak perlu melakukan pembersihan setelah pengujian saat menggunakan Pustaka Pengujian Bereaksi. Di versi sebelumnya, Anda perlu melakukan pembersihan secara manual seperti ini:
aftereach (pembersihan)
Sekarang, library pengujian meng-unmount komponen secara otomatis setelah setiap render.
Membuat Tes Snapshot
Sejauh ini, Anda telah menguji perilaku komponen Button. Tulis tes snapshot untuk menguji apakah output komponen tetap sama.
Tes snapshot membandingkan output saat ini dengan output komponen yang disimpan. Misalnya, jika Anda mengubah gaya komponen Tombol, tes snapshot akan memberi tahu Anda. Anda dapat memperbarui snapshot agar sesuai dengan komponen yang diubah atau membatalkan perubahan gaya.
Tes snapshot sangat berguna kapan pun Anda ingin memastikan UI Anda tidak berubah secara tiba-tiba.
Pengujian snapshot berbeda dari pengujian unit karena Anda harus sudah memiliki kode yang berfungsi untuk membuat snapshot.
Anda akan menggunakan metode renderer dari paket npm react-test-renderer. Jadi, jalankan kode berikut untuk menginstalnya.
npm Install reaksi-uji-renderer
Di Button.test.js, tulis tes snapshot sebagai berikut:
uji('Cuplikan yang cocok', () => {
const pohon = renderer.create(<Nilai tombol="Gabung" />).keJSON();
mengharapkan(pohon).toMatchSnapshot();
})
Tidak ada snapshot yang ada untuk komponen Button, jadi menjalankan pengujian ini akan membuat file snapshot di samping file pengujian:
Tombol
__tes__
│ │ Tombol.tes.js
__snapshot__
│ │ Tombol.uji.js.jepret
│
└─── Tombol.js
Sekarang, ketika Anda menjalankan tes berikutnya, React akan membandingkan snapshot baru yang dihasilkannya dengan snapshot yang disimpan.
Tes Tulis untuk Komponen yang Paling Banyak Digunakan
Tutorial ini mengajarkan Anda cara menulis DOM dan tes snapshot di React dengan menguji komponen Button. Tes menulis untuk semua komponen yang Anda buat bisa jadi membosankan. Namun, pengujian ini menghemat waktu yang Anda habiskan untuk men-debug kode yang sudah diterapkan.
Anda tidak perlu mencapai cakupan pengujian 100 persen tetapi pastikan Anda menulis tes untuk komponen yang paling sering digunakan dan paling penting.
