sebelum memposting pertanyaan ini, saya mencoba mencari di sqa stackexchange tetapi saya tidak menemukan posting tentang dangkal dan membuat di sana, jadi saya harap seseorang dapat membantu saya di sini.
Kapan saya harus menggunakan shallow dan render dalam pengujian komponen react? Berdasarkan dokumen airbnb, saya memberikan beberapa pendapat tentang perbedaan keduanya:
Karena dangkal menguji komponen sebagai satu kesatuan , jadi itu harus digunakan untuk komponen 'induk'. (mis. Tabel, Pembungkus, dll.)
Render untuk komponen anak.
Alasan saya mengajukan pertanyaan ini, adalah karena saya mengalami kesulitan untuk mencari tahu mana yang harus saya gunakan (meskipun dokumen mengatakan bahwa mereka sangat mirip)
Jadi, bagaimana saya tahu mana yang akan digunakan dalam skenario tertentu?
Jawaban:
Sesuai dokumen Enzim :
mount(<Component />)
untuk rendering DOM Penuh ideal untuk kasus penggunaan di mana Anda memiliki komponen yang mungkin berinteraksi dengan DOM apis, atau mungkin memerlukan siklus proses penuh untuk menguji komponen sepenuhnya (mis., componentDidMount dll.)vs.
shallow(<Component />)
untuk Perenderan dangkal berguna untuk membatasi diri Anda sendiri dalam menguji komponen sebagai unit, dan untuk memastikan bahwa pengujian Anda tidak secara tidak langsung menyatakan perilaku komponen turunan.vs.
render
yang digunakan untuk membuat komponen react ke HTML statis dan menganalisis struktur HTML yang dihasilkan.Anda masih dapat melihat "node" yang mendasari dalam render yang dangkal, jadi misalnya, Anda dapat melakukan sesuatu seperti ini (sedikit dibuat-buat) contoh menggunakan AVA sebagai runner spesifikasi:
Perhatikan bahwa rendering , pengaturan props, dan pencarian penyeleksi dan bahkan kejadian sintetis semuanya didukung oleh rendering yang dangkal, jadi seringkali Anda hanya dapat menggunakannya.
Tapi, Anda tidak akan bisa mendapatkan siklus hidup lengkap dari komponen, jadi jika Anda mengharapkan sesuatu terjadi di componentDidMount, Anda harus menggunakan
mount(<Component />)
;Tes ini menggunakan Sinon untuk memata-matai komponen tersebut
componentDidMount
Di atas tidak akan lulus dengan dangkal render atau membuat
render
akan memberi Anda html saja, jadi Anda masih dapat melakukan hal-hal seperti ini:semoga ini membantu!
sumber
Perbedaan antara shallow () dan mount () adalah bahwa shallow () menguji komponen secara terpisah dari komponen anak yang direndernya sementara mount () melangkah lebih dalam dan menguji anak komponen.
Untuk shallow () ini berarti jika komponen induk merender komponen lain yang gagal dirender, rendering shallow () pada induk akan tetap lolos.
sumber