Rumah >hujung hadapan web >tutorial css >Menguji komponen Vue dengan Cypress
Cypress, pelari ujian automatik yang mantap untuk aplikasi berasaskan pelayar, kini menyokong ujian komponen. Artikel ini meneroka mengintegrasikan ujian komponen Cypress ke dalam aplikasi VUE berskala besar, menonjolkan amalan terbaik dan menangani cabaran umum. Pasukan kami, sebelum ini menggunakan Jest dan Vue Test Utils, beralih ke Cypress untuk persekitaran ujian berasaskan pelayar dan integrasi lancar dengan ujian akhir-ke-akhir yang sedia ada.
Nota: Artikel ini mencerminkan fungsi Cypress 8. Mengharapkan potensi perubahan dalam kemas kini masa depan.
Pertimbangkan komponen "Dasar Privasi" dengan butang Tajuk, Badan, dan Pengakuan. Mengklik butang memancarkan acara "Sahkan". Ujian komponen Cypress mungkin kelihatan seperti ini:
import {mount} dari '@cypress/vue'; import privacypolicynotice dari './privacypolicynotice.vue'; Huraikan ('privacypolicynotice', () => { ia ('menjadikan tajuk', () => { gunung (privacypolicynotice); cy.contains ('h1', 'dasar privasi'). harus ('be.visible'); }); ia ('memancarkan acara "sahkan" pada klik butang', () => { gunung (privacypolicynotice); cy.contains ('butang', '/^ok/') .Click () .vue () .THEN ((pembungkus) => { menjangkakan (wrapper.emitted ('sahkan')). to.have.length (1); }); }); });
Ujian ini mengesahkan kedua -dua elemen antara muka pengguna (UI) dan peristiwa antara muka pemaju (API), secara tersirat menguji struktur komponen dan aksesibiliti. Tukar butang untuk Div, sebagai contoh, akan segera menyerlahkan isu kebolehaksesan.
Strategi ujian kami membezakan antara:
Ujian komponen, khususnya, memberi tumpuan kepada mengesahkan peristiwa yang dijangkakan (kontrak pemaju) dan refleksi keadaan UI (kontrak pengguna). Mereka juga berfungsi sebagai dokumentasi komponen yang berharga.
Walaupun Jest dan Vue Test Utils biasanya digunakan untuk ujian komponen, Cypress menawarkan kelebihan dengan menjalankan ujian dalam persekitaran penyemak imbas sebenar. Ini memberikan maklum balas visual, keupayaan debugging, dan interaksi API pelayar yang realistik. Cypress memanfaatkan ujian VUE untuk pemasangan komponen dan rangka kerja khusus.
Aplikasi Vue 2 kami yang besar dengan Vuetify menyampaikan beberapa cabaran:
__cy_root
).!(node_modules)**/*.spec.js
) digunakan dalam cypress.json
untuk mencari fail ujian bersama komponen, tidak termasuk fail yang tidak relevan.cy.vue()
) memudahkan akses kepada pembungkus ujian VUE untuk pernyataan.Semasa pada mulanya menghadapi cegukan kecil (contohnya, kesilapan linter sekejap), manfaatnya melebihi cabaran. Pendekatan ujian yang konsisten merentasi tahap yang berbeza dan keupayaan untuk membangun secara visual dan menguji komponen secara berasingan adalah kelebihan yang signifikan. Memilih komponen yang mudah dan kurang bergantung kepada ujian awal adalah disyorkan.
Ujian komponen Cypress menyediakan pendekatan yang mantap dan mesra pengguna, melengkapkan ujian akhir-ke-akhir yang sedia ada. Walaupun memerlukan kebiasaan dengan pelbagai alat (Vue Test Utils, Cypress, Mocha, Chai, dan lain -lain), sifat bersepadu Cypress memudahkan proses ujian keseluruhan. Pembacaan ujian yang lebih baik dan liputan ujian yang meningkat dalam pasukan kami menyerlahkan keberkesanannya.
Atas ialah kandungan terperinci Menguji komponen Vue dengan Cypress. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!