Vue Academy · Pelajaran

Pengantar Kerangka Kerja Pengujian

Jelajahi ekosistem dan perkakas pengujian Vue.

Pengantar Kerangka Kerja Pengujian adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 3. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 3 pelajaran total.

Mengapa Melakukan Pengujian?

Pengujian otomatis menemukan bug sebelum pengguna menemukannya, mendokumentasikan perilaku yang seharusnya dimiliki kode Anda, dan memungkinkan Anda melakukan refaktor dengan percaya diri. Seiring pertumbuhan aplikasi, pengujian menjadi penting untuk mempertahankan kualitas tanpa pemeriksaan manual.

Tiga Jenis Pengujian

Ada tiga tingkat pengujian utama: pengujian unit memeriksa bagian-bagian kecil secara terpisah, pengujian integrasi memeriksa apakah bagian-bagian tersebut bekerja sama, dan pengujian menyeluruh dari awal hingga akhir mengendalikan seluruh aplikasi seperti pengguna sebenarnya.

Pengujian Unit

Pengujian unit memverifikasi satu fungsi atau komponen secara terpisah, dengan dependensi yang disimulasikan. Pengujian ini cepat dan menunjukkan secara tepat bagian yang rusak. Sebagian besar pengujian Anda sebaiknya berupa pengujian unit.

function add(a, b) {
  return a + b
}

test("add sums two numbers", () => {
  expect(add(2, 3)).toBe(5)
})

Pengujian Integrasi

Pengujian integrasi memeriksa apakah beberapa unit bekerja sama dengan benar, misalnya komponen dengan penyimpanannya, atau formulir yang memanggil pembungkus API. Pengujian ini menemukan masalah penghubung yang tidak dapat ditemukan oleh pengujian unit saja.

Pengujian Menyeluruh

Pengujian menyeluruh menjalankan browser nyata dan mengeklik seluruh aplikasi seperti yang dilakukan pengguna. Pengujian ini paling realistis, tetapi juga paling lambat dan paling mudah mengalami kegagalan karena perubahan kecil, jadi jumlahnya sebaiknya lebih sedikit.

Piramida Pengujian

Piramida pengujian menyarankan banyak pengujian unit yang cepat di dasar, lebih sedikit pengujian integrasi di tengah, dan sedikit pengujian menyeluruh di puncak. Susunan ini menyeimbangkan keyakinan dengan kecepatan.

Vitest

Vitest adalah pelaksana pengujian modern yang cepat dan dibuat untuk proyek berbasis Vite. Vitest memiliki API yang kompatibel dengan Jest dan bekerja lancar dengan aplikasi Vue 3 yang dibuat menggunakan Vite.

npm install -D vitest

Jest

Jest adalah pelaksana pengujian yang telah lama digunakan dan populer dalam ekosistem JavaScript. Vitest meniru API-nya (describe, test, expect), sehingga pengetahuan dapat digunakan di antara keduanya.

describe("math", () => {
  test("adds", () => {
    expect(1 + 1).toBe(2)
  })
})

Vue Test Utils

Vue Test Utils adalah pustaka resmi untuk menguji komponen Vue. Pustaka ini memasang komponen dalam lingkungan pengujian agar Anda dapat berinteraksi dengannya dan memverifikasi keluarannya.

npm install -D @vue/test-utils

Cypress dan Playwright

Untuk pengujian menyeluruh, Cypress dan Playwright adalah pilihan yang populer. Keduanya mengotomatiskan browser nyata, sehingga Anda dapat membuat skrip untuk mengeklik, mengetik, dan bernavigasi, lalu memverifikasi hal-hal yang dilihat pengguna.

Memilih Susunan Teknologi

Penyiapan Vue 3 yang umum menggunakan Vitest bersama Vue Test Utils untuk pengujian unit dan komponen, serta Cypress atau Playwright untuk pengujian menyeluruh. Kombinasi ini mencakup seluruh piramida dengan alat-alat modern yang didukung dengan baik.

Pemeriksaan Singkat

Uji pemahaman Anda tentang kerangka kerja pengujian.

Ringkasan

Pengujian memiliki tiga tingkat: unit, integrasi, dan menyeluruh, yang diseimbangkan melalui piramida pengujian (banyak pengujian unit, sedikit pengujian menyeluruh). Susunan Vue modern menggunakan Vitest atau Jest bersama Vue Test Utils untuk pengujian unit, serta Cypress atau Playwright untuk pengujian menyeluruh. Selanjutnya, Anda akan menulis pengujian unit nyata dengan Vue Test Utils.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Pengantar Kerangka Kerja Pengujian” gratis?

Ya — teks lengkap “Pengantar Kerangka Kerja Pengujian” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 3 pelajaran total.

Apa yang akan aku pelajari di “Pengantar Kerangka Kerja Pengujian”?

Jelajahi ekosistem dan perkakas pengujian Vue. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 3.

Berapa lama pelajaran “Pengantar Kerangka Kerja Pengujian” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Vue Academy