Ujian rendering cetek komponen secara berasingan, tanpa anak, sementara rendering penuh termasuk semua komponen kanak -kanak. Rendering cetek adalah baik untuk menguji logik dan markup komponen sendiri, yang menawarkan pelaksanaan dan pengasingan yang lebih cepat daripada tingkah laku kanak -kanak, tetapi tidak mempunyai sokongan kitaran hayat penuh dan sokongan interaksi DOM. Rendering penuh cemerlang dalam ujian integrasi, dengan tepat mensimulasikan tingkah laku dunia nyata seperti pengendalian acara, cangkuk, dan kemas kini async, walaupun ia lebih perlahan dan memerlukan lebih banyak persediaan. Gunakan rendering cetek untuk mengasingkan dan menguji struktur dan props komponen tunggal, dan rendering penuh apabila menguji interaksi, tingkah laku pengguna, atau kesan kitaran hayat. Kedua-dua pendekatan ini mempunyai perdagangan, dan pilihan bergantung kepada matlamat ujian: pengasingan komponen berbanding integrasi realistik.

Apabila menguji komponen React, istilah "cetek" dan "rendering penuh" sering muncul. Perbezaan utama terletak pada berapa banyak pokok komponen yang akan diberikan semasa ujian.

Rendering cetek hanya membuat komponen yang anda uji, tanpa membuat anak -anaknya. Ia berguna apabila anda ingin mengasingkan komponen dan fokus semata -mata pada tingkah laku dan outputnya. Sebaliknya, rendering penuh (kadang -kadang dipanggil rendering dalam) menjadikan seluruh pokok komponen, termasuk semua komponen kanak -kanak. Ini memberi anda perwakilan yang lebih realistik tentang bagaimana komponen berkelakuan dalam persekitaran aplikasi sebenar.

Berikut adalah melihat lebih dekat setiap pendekatan dan apabila anda mungkin memilih satu di atas yang lain.

Apa yang baik untuk rendering cetek?

Rendering cetek berfungsi dengan baik apabila anda ingin menguji komponen secara berasingan. Alat seperti enzim yang digunakan untuk mempopularkan kaedah ini kerana ia membolehkan pemaju untuk memeriksa prop komponen, keadaan, dan struktur UI sendiri tanpa masuk ke dalam logik komponen kanak -kanak.

Contohnya:

• Anda mempunyai komponen Button di dalam komponen yang diuji anda.
• Dengan rendering cetek, Button tidak akan benar -benar diberikan - ia hanya akan muncul sebagai tag dalam output yang diberikan.
• Dengan cara itu, anda tidak secara tidak sengaja menulis ujian yang gagal kerana perubahan dalam komponen kanak -kanak.

Gunakan rendering cetek jika:

• Anda memberi tumpuan kepada logik dan markup komponen sendiri
• Anda mahukan pelaksanaan ujian yang lebih cepat
• Anda tidak prihatin dengan bagaimana komponen bersarang bersarang

Tetapi perlu diingat, rendering cetek tidak mengendalikan kaedah kitaran hayat sebagai interaksi sepenuhnya atau DOM, jadi ia tidak sesuai untuk menguji perkara seperti peristiwa klik atau pengambilan data.

Bilakah anda harus menggunakan rendering penuh?

Rendering penuh lebih sesuai untuk ujian gaya integrasi di mana anda ingin mengesahkan bagaimana komponen berfungsi bersama. Perpustakaan seperti Perpustakaan Ujian React menggalakkan gaya ini secara lalai, terutamanya dengan render() dari @testing-library/react .

Berikut adalah beberapa senario di mana penyerahan penuh bersinar:

• Anda perlu menguji bagaimana komponen berinteraksi dengan anak -anaknya
• Anda menyemak kemas kini DOM sebenar selepas tindakan pengguna
• Anda menguji penyedia konteks, cangkuk, atau kesan kitaran hayat

Sebagai contoh: Jika komponen anda mengambil data apabila dipasang dan memaparkannya, rendering cetek tidak akan mencetuskan kesan itu. Tetapi dengan rendering penuh, anda boleh menunggu data memuatkan dan menegaskan output akhir.

Oleh itu, jika anda mengambil berat tentang tingkah laku dunia-seperti pengendalian acara, manipulasi DOM, atau kemas kini asynchronous-rendering penuh adalah pilihan yang lebih baik.

Perdagangan antara kedua-dua pendekatan

Setiap kaedah mempunyai kebaikan dan keburukan bergantung kepada apa yang anda cuba uji:

Rendering cetek:

• Pelaksanaan lebih cepat
• Pengasingan komponen
• Bagus untuk ujian snapshot

Rendering cetek:

• Tidak menangkap tingkah laku kanak -kanak
• Simulasi kitaran hayat terhad
• Interaksi DOM yang kurang realistik

Kelebihan Rendering Penuh:

• Interaksi komponen realistik
• Lebih baik untuk simulasi tingkah laku pengguna
• Menyokong ujian dan cangkuk async

Kekurangan penuh:

• Lebih perlahan daripada cetek
• Lebih banyak persediaan diperlukan (seperti mengejek)
• Boleh menjadi lebih sukar untuk debug apabila sesuatu pecah di dalam pokok

Memilih di antara mereka benar -benar turun ke matlamat ujian anda. Jika anda mengesahkan logik atau struktur dalaman, cetek mungkin cukup. Jika anda mensimulasikan penggunaan sebenar, pergi penuh.

Pada asasnya, ia bergantung kepada apa yang anda uji dan berapa kedalaman yang anda perlukan. Rendering cetek membantu anda tetap fokus pada komponen semasa, sementara rendering penuh membolehkan anda melihat gambar yang lebih besar.

Atas ialah kandungan terperinci Huraikan perbezaan antara rendering cetek dan penuh dalam ujian React.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!