Pernah nggak kamu nulis kode Vue 3 yang kelihatannya berjalan sempurna, lalu di hari deploy tiba-tiba muncul bug yang bikin malu di depan klien? Nah, itulah saatnya kamu kenalan serius dengan testing Vue 3. Di artikel ke-15 dari seri Vue from Zero to Zorro ini, kita akan belajar cara menggunakan Vitest dan Vue Test Utils — dua senjata utama untuk memastikan komponen-komponen Vue kamu bekerja dengan benar sebelum sampai ke tangan pengguna.
Testing bukan cuma urusan senior developer. Bahkan sebagai pemula, membiasakan diri menulis test sejak awal adalah investasi terbaik untuk karir dan kesehatan mental kamu di masa depan. Yuk mulai! ๐
Apa Itu Testing Komponen Vue 3?
Testing komponen adalah proses memverifikasi bahwa sebuah komponen Vue bekerja sesuai harapan — mulai dari render tampilan, respons terhadap event pengguna, hingga perubahan state. Dengan Vitest sebagai test runner dan Vue Test Utils sebagai helper khusus Vue, proses ini jadi jauh lebih mudah dan menyenangkan.
๐งช Mengenal Vitest dan Vue Test Utils untuk Testing Vue 3
Bayangkan kamu baru selesai masak sup. Sebelum dihidangkan ke tamu, kamu pasti mencicipi dulu kan? Nah, testing komponen Vue 3 itu persis seperti itu — mencicipi kode sebelum "dihidangkan" ke pengguna.
Ada dua alat utama yang akan kita pakai:
Fakta Menarik
Vitest diciptakan oleh tim yang sama dengan Vite dan Vue! Makanya integrasi keduanya terasa begitu mulus. Bahkan banyak developer bilang menulis test dengan Vitest di Vue 3 terasa "fun" — sesuatu yang jarang diucapkan soal testing. ๐
⚙️ Setup Vitest di Proyek Vue 3 (Step by Step)
Oke, cukup teorinya. Mari kita langsung praktik! Berikut langkah-langkah menyiapkan environment testing Vue 3 dengan Vitest dari nol.
Install dependensi yang diperlukan
Pastikan kamu sudah punya proyek Vue 3 + Vite. Kemudian install Vitest dan Vue Test Utils:
# atau pakai pnpm:
pnpm add -D vitest @vue/test-utils happy-dom
Konfigurasi Vitest di vite.config.js
Tambahkan konfigurasi test ke file vite.config.js yang sudah ada:
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
test: {
// Simulasi browser environment
environment: 'happy-dom',
// Biar tidak perlu import describe/it/expect tiap file
globals: true,
}
})
Tambahkan script di package.json
"dev": "vite",
"build": "vite build",
"test": "vitest", // mode watch
"test:run": "vitest run" // sekali jalan (CI/CD)
}
Tips Pro
Gunakan npm test saat development (mode watch — otomatis re-run setiap file berubah) dan npm run test:run saat push ke repository atau CI/CD pipeline.
✍️ Menulis Test Pertama dengan Vue Test Utils
Sekarang bagian paling seru — menulis test sungguhan! Kita akan test sebuah komponen tombol sederhana yang menampilkan counter. Ini adalah skenario paling umum saat belajar vue test utils.
Buat komponen yang ingin di-test: Counter.vue
<div>
<p data-testid="count">{{ count }}</p>
<button @click="increment">Tambah</button>
</div>
</template>
<script setup>
import { ref } from 'vue'
const count = ref(0)
const increment = () => count.value++
</script>
Buat file test: Counter.test.js
import Counter from './Counter.vue'
describe('Counter.vue', () => {
it('render count awal = 0', () => {
const wrapper = mount(Counter)
const count = wrapper.find('[data-testid="count"]')
expect(count.text()).toBe('0')
})
it('count bertambah setelah klik tombol', async () => {
const wrapper = mount(Counter)
await wrapper.find('button').trigger('click')
expect(wrapper.find('[data-testid="count"]').text()).toBe('1')
})
})
Insight Penting
Perhatikan penggunaan async/await saat men-trigger event. Vue perlu satu "tick" untuk memperbarui DOM setelah state berubah. Tanpa await, test kamu mungkin akan selalu gagal meski kode komponen sudah benar!
๐️ Jenis-Jenis Test yang Perlu Kamu Tahu di Ekosistem Vitest Vue
Dunia testing itu luas. Biar nggak bingung, bayangkan testing seperti quality control di pabrik mobil. Ada yang ngecek tiap baut (unit test), ada yang ngecek satu mesin rakitan (component test), dan ada yang test mobil jalan di jalanan (end-to-end test).
๐️ Tiga Lapisan Testing di Vue 3
Unit Test
Test fungsi/logika kecil secara terisolasi. Contoh: test fungsi formatCurrency, validasi form, composable.
Component Test
Test komponen Vue (render, event, props). Dibantu oleh Vue Test Utils. Inilah fokus artikel ini!
E2E Test
Simulasi pengguna nyata di browser. Pakai tool seperti Cypress atau Playwright. Level lanjutan.
๐จ Testing Props, Emits, dan Composable di Vue 3
Komponen Vue 3 nyata biasanya punya props dan emit event. Berikut cara test keduanya menggunakan vue test utils:
๐ Test menerima props dengan benar:
import { mount } from '@vue/test-utils'
import WelcomeMessage from './WelcomeMessage.vue'
it('menampilkan nama dari props', () => {
const wrapper = mount(WelcomeMessage, {
props: { name: 'Budi' }
})
expect(wrapper.text()).toContain('Budi')
})
๐ Test emit event saat tombol diklik:
const wrapper = mount(MyForm)
await wrapper.find('button[type="submit"]').trigger('click')
// Cek apakah event 'submit' sudah di-emit
expect(wrapper.emitted().submit).toBeTruthy()
expect(wrapper.emitted().submit[0]).toEqual([{ email: 'test@mail.com' }])
})
Perhatian
Hindari menggunakan selektor CSS yang bergantung pada styling (seperti class utility Tailwind) untuk mencari elemen di test. Gunakan data-testid sebagai attribute khusus testing — lebih stabil dan tidak terpengaruh perubahan tampilan.
Testing Composable
Untuk test composable (useCounter, useFetch, dll.), cukup panggil fungsinya langsung tanpa perlu mount komponen. Contoh: const { count, increment } = useCounter() lalu assert hasilnya. Sederhana dan super cepat!
Seri Lengkap
Vue from Zero to Zorro — 16 Artikel Belajar Vue 3
Dari pengenalan dasar hingga deploy ke internet — semua ada di seri ini. Lihat daftar lengkap seluruh artikelnya!
→ Lihat Semua Artikel Seri Vue from Zero to Zorro๐บ️ Navigasi Seri
← Artikel Sebelumnya
Performa & Best Practice Vue 3 — Lazy Loading, Code Splitting
→ Baca Artikel Sebelumnya
No comments:
Post a Comment