Latihan 1 dari materi Testing Vue Components di Vue — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Tulis test pertamamu untuk komponen Vue. Editor ini berisi Counter.vue (sudah jadi: #count mulai 0, #increment menambah satu) dan, mulai baris // Counter.test.js, file test-nya. Begitu dijalankan, pratinjau menampilkan laporan test seperti Vitest.
Di dalam describe("Counter", ...), tulis dua test:
it("mulai dari 0", ...): const wrapper = mount(Counter), lalu expect(wrapper.find("#count").text()).toBe("0").
it("jadi 2 setelah diklik dua kali", async () => ...): mount, lalu await wrapper.find("#increment").trigger("click") dua kali, lalu periksa #count berisi "2".
Setelah semua test lulus, editor menjalankannya lagi pada salinan Counter.vue yang sengaja dirusak sedikit (0 jadi 1, ++ jadi --). Test yang bagus gagal pada setiap salinan rusak itu ("killed"). Jangan ubah Counter.vue.
Yang dicek:
- Laporannya
PASS, dengan minimal 2 test lulus.
Mutation score: 100%: setiap salinan rusak ketahuan oleh test-mu.
- Kodenya memakai
mount(Counter, trigger("click") dengan await, dan expect(.