Jika Anda ingin tahu cara menguji reaksi, Anda berada di tempat yang tepat. Apakah Anda benar-benar tahu kode Anda melakukan apa yang seharusnya dilakukan? Sudahkah Anda mengujinya di browser? Bagaimana jika Anda belum, atau Anda tidak dapat menguji semuanya, dan itu rusak dalam produksi?
Perpustakaan pengujian adalah sekelompok pengembang utilitas yang digunakan untuk menulis tes individu pada komponen aplikasi. Beberapa bagian prinsip dari tes adalah:
Deskripsi:
menjelaskan tentang apa tesnya
Gunakan / Render:
menggunakan komponen dalam lingkungan di mana ia dapat diuji
Mengejek:
menciptakan fungsi berpura-pura, sehingga Anda dapat memeriksa asumsi Anda
Selama artikel ini, saya akan mengeksplorasi beberapa contoh dari perpustakaan pengujian reaksi untuk membantu Anda memulai dengan cara berharga ini untuk meningkatkan kekokohan output kode Anda, serta memastikan kode Anda tidak melempar setiap kejutan jahat setelah masuk ke produksi.
Ingin sumber daya yang lebih bermanfaat? Inilah ikhtisuan yang terbaik
Alat Desain Web.
Di sekitar itu akan membantu Anda bekerja lebih pintar. Atau jika Anda membutuhkan mesin baru, cobalah roundup ini
Laptop terbaik untuk pemrograman
. Atau jika Anda sedang membangun situs baru, Anda mungkin perlu yang hebat
Pembangun Situs Web
.
01. Mulai dengan Perpustakaan Pengujian REAKS
Saya akan menggunakan Buat-REACT-App untuk demo ini karena sudah dilewati sebelumnya dengan pustaka pengujian. Jika Anda menggunakan Gatsby atau pengaturan khusus, mungkin ada beberapa konfigurasi yang perlu Anda jalankan sebelum Anda mulai menggunakan pustaka pengujian.
Untuk memulai, mari buat aplikasi baru. Jika Anda sudah memiliki versi node.js baru-baru ini, Anda dapat menjalankan perintah berikut tanpa menginstal hal lain secara global:
npx create-react-app netmag-javascript-testing
02. Putuskan apa yang harus diuji
Bayangkan kita memiliki komponen sederhana, ucapkan tombol dengan beberapa negara. Apa saja hal-hal yang perlu diuji dalam komponen seperti ini?
●.
Penampilan komponen:
Kami tidak ingin apa pun berubah secara tak terduga setelah kami menulis komponen kami. Jadi kita akan menulis tes snapshot untuk menangkap bagaimana render. Kemudian, jika ada perubahan, kita akan melihatnya dengan cepat tanpa tes manual atau visual. Ini bagus untuk komponen yang terdiri dari banyak komponen yang lebih kecil: Anda dapat melihat dengan cepat ketika (dan di mana) penampilannya telah terpengaruh.
●.
Berbagai cabang yang membuat:
Karena kita dapat memiliki dua atau lebih output yang berbeda, kita perlu menguji rendering semuanya dengan benar, bukan hanya satu dari mereka. Jadi kita perlu mensimulasikan acara klik dan memiliki tes snapshot lain untuk cara render setelah cabang kode ini telah dijalankan.
●.
Bahwa fungsi dipanggil seperti yang diharapkan:
Kami ingin memastikan bahwa kode yang kami tulis untuk memanggil fungsi lain berfungsi seperti yang kami anggap akan. Tetapi karena fungsi itu adalah ketergantungan eksternal, kami tidak ingin menguji hal itu di sini. Tes kami harus hanya merangkum fungsi yang kami inginkan.
Mari kita tulis tes pertama kami. Buat file baru yang disebut
Mycomponent.unit.test.js.
di folder yang sama dengan komponen. Dengan menambahkan test.js pada akhirnya, itu akan secara otomatis dipilih oleh pustaka pengujian. Isi file itu di bawah ini:
Impor bereaksi dari 'REACT'
impor {render} dari '@ testing-library / react'
Impor MyComponent dari './myComponent'
Jelaskan ('the & lt; mycomponent / & gt;', () = & gt; {
// tes pergi ke sini
})
Hal pertama yang saya ingin menarik perhatian Anda adalah
menggambarkan()
Fungsi, yang membutuhkan dua argumen: Yang pertama adalah string yang dapat Anda gunakan untuk lebih baik menggambarkan - sebagai string teks - apa yang akan dilakukan tes Anda. Dalam kasus kami, kami hanya mengatakan bahwa itu harus diberikan. Ini sangat berguna ketika orang lain melihat kode Anda atau Anda harus mengingat apa yang Anda lakukan pada tahap selanjutnya. Menulis pernyataan gambarkan bagus adalah bentuk dokumentasi kode dan alasan kuat lainnya untuk menulis tes.
Argumen kedua adalah tes Anda. Itu
menggambarkan()
Fungsi akan menjalankan semua tes ini satu demi satu.
04. Gunakan fungsi pembersihan
Mari kita perkenalkan fungsi pembantu yang disebut
Sebelumnya?
. Kita perlu menggunakan ini karena setiap kali kita melakukan sesuatu dengan komponen, kita ingin salinan baru tanpa alat peraga yang sebelumnya telah kita lewati agar masih ada dalam komponen. Atau kita mungkin perlu merender kembali komponen:
Sebelumnya?
Apakah itu untuk kita dan kita bisa meneruskannya fungsi pembersihan.
impor {render, pembersihan} dari '@ testing-library / react'
...
Jelaskan ('komponen harus render', () = & gt; {
Sebelumnya?
}
Pada langkah ini, kita akan 'me-mount' komponen kita (atau render).
Jelaskan ('komponen harus render', () = & gt; {
Sebelumnya?
itu ('render dengan alat peraga dasar', () = & gt; {
render (& lt; mycomponent / & gt;)
})
}
Render ini memberi kita akses ke semua properti yang diberikan dari komponen yang dikompilasi. Mungkin baik untuk menjatuhkan ini menjadi
konsol.log ()
Jadi, Anda dapat melihat lebih jelas apa yang dilakukannya.
Jika Anda melakukannya, Anda akan melihat bahwa ada beberapa sifat yang berguna yang dapat kami manfaatkan di sini. Saya akan membuat pernyataan (membuat deklarasi yang dapat diuji) dan mengujinya dengan mengekstraksi wadah. Wadah 'mengandung' node DOM (semua HTML) yang terkait dengan komponen.
IT ('Render dengan alat peraga dasar', () = & gt; {
const {container} = render (& lt; mycomponent / & gt;)
})
Sekarang kita memiliki akses ke wadah, bagaimana saya mengatakan bahwa itu diberikan sesuai dengan pernyataan saya? Dengan menambahkan tes snapshot.
Pikirkan snapshot seperti foto. Dibutuhkan snapshot komponen kami pada titik waktu tertentu. Kemudian setiap kali kita membuat perubahan pada kode, kita dapat melihat apakah masih cocok dengan snapshot asli. Jika ya, kita dapat yakin bahwa tidak ada yang berubah dalam komponen. Namun, jika tidak, kita mungkin telah menemukan masalah yang berasal dari komponen lain, yang mungkin tidak kita lihat sebelumnya:
06. Tes Properties.
Alat peraga, atau properti, dari komponen dapat diuji dengan foto juga. Menguji berbagai alat peraga yang Anda berikan kepada komponen Anda akan memberi Anda cakupan dan kepercayaan diri yang lebih besar. Anda tidak pernah tahu kapan persyaratan berarti alat peraga komponen Anda di refactored dan output akhir akan berubah.
Kami mendefinisikan sifat-sifat dalam suatu objek dan kemudian menggunakan operator spread (tiga titik diikuti oleh nama objek:
... LightProperties)
Karena kita hanya bisa melewati satu argumen ketika kita membuat dengan cara ini. Ini juga berguna untuk melihat sifat apa yang Anda lewati dalam isolasi:
IT ('Render dengan alat peraga dasar', () = & gt; {
const {container} = render (& lt; mycomponent / & gt;
)
Harapkan (wadah) .tomatchSnapshot ()
})
itu ('render dengan alat peraga versi cahaya', () = & gt; {
const {container} = render (
& lt; mycomponent {... LightProperties} / & gt;
)
Harapkan (wadah) .tomatchSnapshot ()
})
07. Tes Perubahan dalam UI
Bayangkan komponen kami memiliki tombol dan Anda ingin memastikan bahwa sesuatu terjadi ketika tombol diklik. Anda mungkin berpikir bahwa Anda ingin menguji keadaan aplikasi; Misalnya, Anda mungkin tergoda untuk menguji bahwa negara telah memperbarui. Namun, itu bukan objek dari tes ini.
Ini memperkenalkan kami pada konsep penting dalam menggunakan perpustakaan pengujian: Kami di sini tidak menguji keadaan atau cara kerja komponen kami. Kami di sini untuk menguji bagaimana orang akan menggunakan komponen dan memenuhi harapan mereka.
Jadi apakah negara telah diperbarui tidak material; Apa yang ingin kami uji adalah apa hasil dari tombol tekan itu.
Mari kita bayangkan kita sedang menguji hasil dari fungsi yang mengubah UI dari mode gelap ke mode cahaya. Inilah komponennya:
Apakah Anda melihat bahwa kami menambahkan atribut baru
Data-Testid.
ke tombol? Inilah cara Anda mengujinya. Pertama, impor fungsi baru, perekat dari perpustakaan pengujian:
impor {cleanup,
perekat,
memberikan
} dari '@ pengujian-library / react'
Kita dapat menggunakan fungsi itu untuk menguji ada perubahan dalam UI dan bahwa perubahan tersebut konsisten:
IT ('Render dengan alat peraga dasar', () = & gt; {
const {container} = render (& lt; toglebutton / & gt;
)
Harapkan (wadah) .tomatchSnapshot ()
})
itu ('render UI cahaya pada klik', () = & gt; {
const {wadah, getbytestid} = render (& lt; toglebutton / & gt;)
firevent.click (getbytestid ('mode-toggle'))
Harapkan (wadah) .tomatchSnapshot ()
})
Ini bagus: kami tidak harus pergi ke situs secara manual dan melihat-lihat, lalu klik tombol dan melihat-lihat kedua kalinya - selama itu, Anda mungkin mengakui, Anda mungkin akan melupakan atau melewatkan sesuatu! Sekarang kita dapat memiliki keyakinan bahwa, diberi input yang sama, kita dapat mengharapkan output yang sama dalam komponen kita.
Ketika datang ke tes ID, saya pribadi tidak suka menggunakan
Data-Testid.
untuk menemukan sesuatu di dom. Lagi pula, objek tes adalah untuk meniru apa yang dilakukan pengguna dan untuk menguji apa yang terjadi ketika mereka melakukannya.
Data-Testid.
Terasa seperti sedikit curang - meskipun data-testid kemungkinan akan berguna untuk insinyur QA Anda (lihat boxout peran insinyur jaminan kualitas).
Sebaliknya, kita bisa menggunakan
getbytext ()
dan lulus dalam teks tombol kami. Metode itu akan lebih spesifik perilaku.
08. Mock dan memata-matai fungsi
Kadang-kadang kita mungkin perlu menguji panggilan ke fungsi tetapi fungsi itu berada di luar ruang lingkup tes. Misalnya, saya memiliki modul terpisah yang berisi fungsi yang menghitung nilai PI ke sejumlah desimal.
Saya tidak perlu menguji apa hasil modul itu. Saya perlu menguji bahwa fungsi saya seperti yang diharapkan. Untuk informasi lebih lanjut tentang mengapa ini, silakan lihat unit kotak dan tes integrasi. Dalam hal ini, kita bisa 'mengejek' fungsi itu:
Fungsinya
Tohaveencalledtimes ()
adalah salah satu dari banyak fungsi pembantu di perpustakaan pengujian yang memungkinkan kami
untuk menguji output fungsi. Ini memungkinkan kami tidak hanya mencakup tes kami hanya untuk modul yang ingin kami uji tetapi juga berarti kami dapat 'memata-matai' pada atau melihat apa yang dilakukan fungsi kami ketika itu menyebut fungsi itu.
Tes menulis dapat tampak sedikit menakutkan untuk memulai. Saya harap tutorial ini memberi Anda sedikit lebih percaya diri untuk mencobanya. Sejak saya mulai menulis tes untuk aplikasi saya, saya benar-benar tidak bisa kembali: Saya bisa beristirahat lebih mudah, mengetahui saya meninggalkan warisan yang jauh lebih baik bagi mereka yang akan menggunakan pekerjaan saya di masa depan.
Ingat, jika Anda membangun situs yang kompleks, Anda akan ingin mendapatkan
hosting web.
Tempat layanan. Dan jika situs itu cenderung mengandung banyak aset, menyimpannya secara andal
penyimpanan awan
sangat penting.
Konten ini awalnya muncul di
Net Magazine.
. Baca lebih lanjut dari kami
artikel desain web di sini
.
