🧪 Unit Testing di Vue.js

Unit testing adalah pengujian pada bagian terkecil dari aplikasi, seperti fungsi atau komponen Vue, untuk memastikan bahwa mereka bekerja sesuai harapan secara independen.

Vue.js mendukung pengujian dengan berbagai tools, namun kombinasi paling umum adalah:

• Jest: Framework pengujian JavaScript
• Vue Test Utils: Utilitas resmi dari Vue untuk testing komponen

---

🧰 1. Instalasi (Vue CLI)

Jika menggunakan Vue CLI:

vue add unit-jest

Atau install secara manual:

npm install --save-dev jest @vue/test-utils vue-jest babel-jest

Tambahkan script di package.json:

"scripts": {
  "test:unit": "jest"
}

---

🧱 2. Contoh Komponen: Hello.vue

<template>
  <h1>{{ greet }}</h1>
</template>

<script>
export default {
  name: 'Hello',
  props: ['name'],
  computed: {
    greet() {
      return `Halo, ${this.name}`;
    }
  }
}
</script>

---

🧪 3. Contoh Unit Test

File: tests/unit/Hello.spec.js

import { shallowMount } from '@vue/test-utils'
import Hello from '@/components/Hello.vue'

describe('Hello.vue', () => {
  it('menampilkan nama dari props', () => {
    const wrapper = shallowMount(Hello, {
      propsData: { name: 'Dina' }
    });
    expect(wrapper.text()).toContain('Halo, Dina');
  });
});

---

🔍 4. shallowMount vs mount

Method	Fungsi
shallowMount	Render hanya komponen ini saja, tidak termasuk child-nya
mount	Render penuh, termasuk child component

Gunakan shallowMount untuk unit test dan mount untuk integration test.

---

📂 5. Struktur Direktori Testing

tests/
├── unit/
│   └── Hello.spec.js

Pastikan jest mencari direktori tests/unit/ sesuai konfigurasi.

---

🔄 6. Menjalankan Test

npm run test:unit

Hasil akan menunjukkan berapa banyak test yang berhasil, gagal, atau di-skip.

---

✅ 7. Best Practice

• Buat test untuk setiap komponen penting

• Fokus pada logic, props, event, dan kondisi tampilan

• Hindari testing untuk code yang sudah di-test oleh Vue sendiri (seperti <template> sederhana)

• Gunakan coverage report untuk memastikan cakupan testing

---

🧠 8. Test Lanjutan

• Event emit ($emit)

• Kondisi v-if / v-for

• Input form (v-model)

• Integrasi dengan Vuex atau Router