Latihan 1: Testing Vue Components — Vue

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:

  1. it("mulai dari 0", ...): const wrapper = mount(Counter), lalu expect(wrapper.find("#count").text()).toBe("0").
  2. 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:

Hint