Belajar Svelte - Testing & Quality

#Pendahuluan

Kode tanpa tes terasa seperti bangunan tanpa fondasi: berfungsi sampai rusak di tempat yang paling tidak terduga. Pengujian otomatis membuat perubahan yang berani menjadi aman, karena kesalahan terdeteksi dalam hitungan detik, bukan di produksi.

Episode ini membahas unit testing komponen dengan Vitest dan Svelte Testing Library, integration testing untuk aplikasi SvelteKit, E2E testing dengan Playwright, serta static analysis, linting, dan type checking.

Setelah selesai, kalian punya lapisan pengujian yang menangkap kesalahan pada tingkat paling tepat: unit test untuk logika, integration test untuk modul yang bekerja sama, dan E2E untuk alur pengguna nyata.

#Unit Testing dengan Vitest dan Svelte Testing Library

#Setup Vitest

Proyek SvelteKit yang baru sudah menyertakan konfigurasi Vitest lewat plugin @sveltejs/kit/vite. Untuk proyek yang lebih lama, pasang secara manual:

npm install -D vitest jsdom @testing-library/svelte

jsdom menyediakan lingkungan DOM di Node, sehingga komponen bisa di-render dan diuji tanpa browser sungguhan.

#Menulis Test Pertama

Buat komponen kecil dan test perilakunya seperti pengguna, bukan detail implementasi:

<script>
  let hitung = $state(0)
</script>
 
<button onclick={() => hitung += 1}>Hitung: {hitung}</button>

Tesnya memeriksa hasil interaksi:

Test komponen Counter

import { render, screen, fireEvent } from "@testing-library/svelte"
import { describe, it, expect } from "vitest"
import Counter from "./Counter.svelte"
 
describe("Counter", () => {
  it("menambahkan nilai saat tombol diklik", async () => {
    render(Counter)
    const tombol = screen.getByRole("button")
    await fireEvent.click(tombol)
    expect(screen.getByText("Hitung: 1")).toBeTruthy()
  })
})

screen.getByRole("button") memilih tombol lewat peran aksesibilitasnya — bukan selector DOM — sehingga tes lebih tahan terhadap perubahan struktur. fireEvent.click(tombol) mensimulasikan klik pengguna.

#Integration Testing untuk Aplikasi SvelteKit

#Tes pada Tingkat Endpoint dan Form Actions

Integration testing memastikan modul bekerja bersama: load function membaca data, form action memvalidasi, dan respons sampai ke komponen. Endpoint server bisa diuji dengan memanggil handler-nya langsung di Vitest:

Uji endpoint server

import { describe, it, expect } from "vitest"
import { GET } from "./+server.js"
 
describe("endpoint /api/health", () => {
  it("mengembalikan status sehat", async () => {
    const res = await GET()
    expect(res.status).toBe(200)
    const body = await res.json()
    expect(body.status).toBe("ok")
  })
})

await GET() mengeksekusi handler endpoint tanpa HTTP server sungguhan. Pola ini cepat dan deterministik untuk menguji logika server.

#E2E Testing dengan Playwright

#Alur Pengguna Nyata di Browser

Unit dan integration test tidak bisa menangkap masalah yang hanya muncul saat seluruh aplikasi berjalan di browser: navigasi, autentikasi, dan interaksi lintas halaman. Playwright menjalankan alur ini di browser sungguhan.

npm run test:e2e

SvelteKit menyertakan konfigurasi Playwright secara default. Tes E2E berjalan lebih lambat dibanding unit test, jadi fokuskan pada alur kritis: login, checkout, dan navigasi utama.

#Static Analysis, Linting, dan Type Checking

#svelte-check dan ESLint

npx svelte-check memeriksa tipe di seluruh proyek tanpa harus menjalankan build penuh. Pasangkan dengan ESLint untuk menangkap kesalahan pola kode sejak di editor:

{
  "scripts": {
    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
    "lint": "eslint ."
  }
}

npm run check dan npm run lint sebaiknya dijalankan sebelum commit dan di dalam CI. Kesalahan tipe yang tertangkap di pipeline lebih murah daripada bug yang ditemukan pengguna.

#Penutup

Inti yang harus dibawa pulang:

• Unit test menangkap kesalahan logika komponen dengan cepat.
• Tes interaksi lewat peran aksesibilitas, bukan selector DOM.
• Integration test menguji load function dan endpoint secara langsung.
• E2E dengan Playwright menutup alur kritis di browser sungguhan.
• Jalankan svelte-check dan ESLint di CI untuk menangkap masalah lebih awal.
• Pilih lapisan pengujian sesuai biaya dan kecepatannya.

Di episode 17 selanjutnya kalian akan belajar accessibility & UX — peran ARIA dan navigasi keyboard, HTML semantik dan komponen aksesibel, desain responsif dan progressive enhancement, serta dasar internationalization. Testing dari episode ini akan menjamin bahwa perbaikan aksesibilitas tidak merusak fitur yang ada.