Belajar SvelteKit - Testing & Quality

#Pendahuluan

Semakin besar aplikasi, semakin mahal error yang baru ketahuan di produksi. Episode 16 membahas testing dan quality di SvelteKit: unit testing dengan Vitest dan Svelte Testing Library, integration testing untuk API routes, E2E testing dengan Playwright, serta static analysis dan type checking.

Testing bukan sekadar menjalankan kode, tetapi membangun kepercayaan untuk mengubah kode tanpa takut merusak yang sudah berjalan. Lapisan tes yang baik bekerja seperti jaring pengaman: unit untuk logika terkecil, integration untuk antar modul, dan E2E untuk alur nyata pengguna.

Setelah episode ini, kalian punya setup testing lengkap yang berjalan di CI dan memberi umpan balik cepat di setiap perubahan.

#Unit Testing dengan Vitest

#Konfigurasi Vitest di Vite

Vitest berjalan di atas Vite, jadi ia memakai konfigurasi proyek yang sama dengan SvelteKit. Untuk menguji komponen, tambahkan lingkungan jsdom dan plugin testing library.

Konfigurasi Vitest

import { defineConfig } from "vitest/config";
import { svelte } from "@sveltejs/vite-plugin-svelte";
import { svelteTesting } from "@testing-library/svelte/vite";
 
export default defineConfig({
    plugins: [svelte(), svelteTesting()],
    test: {
        environment: "jsdom",
        include: ["src/**/*.test.ts"]
    }
});

#Menulis Test Komponen

Svelte Testing Library memungkinkan kalian merender komponen dan berinteraksi dengannya seperti pengguna. Assertion berfokus pada hasil yang terlihat, bukan detail implementasi internal.

import { render, screen } from "@testing-library/svelte";
import { describe, it, expect } from "vitest";
import Tombol from "./Tombol.svelte";
 
describe("Tombol", () => {
    it("menampilkan label dan merespons klik", async () => {
        render(Tombol, { props: { label: "Kirim" } });
        const tombol = screen.getByText("Kirim");
        expect(tombol).toBeTruthy();
    });
});

#Integration Testing dan API Route Tests

#Menguji Server Actions dan Load Functions

Logika server seperti server actions dan load functions bisa diuji langsung tanpa browser: panggil handler-nya dengan objek event tiruan dan periksa hasilnya. Ini jauh lebih cepat daripada E2E untuk memvalidasi aturan bisnis.

import { describe, it, expect } from "vitest";
import { actions } from "./+page.server.js";
 
describe("action simpan", () => {
    it("menolak nama yang terlalu pendek", async () => {
        const form = new FormData();
        form.set("nama", "ab");
 
        const hasil = await actions.simpan({
            request: new Request("http://localhost", { method: "POST", body: form })
        });
 
        expect(hasil.status).toBe(400);
    });
});

#Memverifikasi Endpoint dengan Request Nyata

Untuk endpoint +server.js, buat objek Request dan URL sungguhan lalu panggil handler method-nya. Dengan cara ini jalur parsing query, header, dan pembentukan respons diuji end-to-end di level kode, tanpa perlu menjalankan server.

#E2E Testing dengan Playwright

#Menyiapkan Playwright

Playwright menguji aplikasi yang benar-benar berjalan di browser. Konfigurasi bawaan sudah mencakup Chromium, Firefox, dan WebKit, sehingga kompatibilitas lintas browser teruji.

npm install -D @playwright/test
npx playwright install --with-deps
npx playwright test

#Menulis Test Alur Nyata

E2E meniru perilaku pengguna: mengunjungi halaman, mengisi form, dan memeriksa hasilnya. Karena berjalan di browser sungguhan, tes ini menangkap masalah yang luput dari unit test, seperti hydration dan interaksi lintas komponen.

import { test, expect } from "@playwright/test";
 
test("login berhasil membawa ke dashboard", async ({ page }) => {
    await page.goto("/login");
    await page.getByLabel("Email").fill("user@example.com");
    await page.getByLabel("Password").fill("rahasia");
    await page.getByRole("button", { name: "Masuk" }).click();
 
    await expect(page).toHaveURL("/dashboard");
});

#Static Analysis dan Type Checking

#Type Checking dengan svelte-check

Jenis error tertentu — props yang salah, opsi route yang keliru, tipe data yang tidak cocok — tidak muncul di runtime, tetapi bisa dideteksi oleh pemeriksa tipe. svelte-check menganalisis seluruh proyek termasuk file .svelte.

npx svelte-kit sync
npx svelte-check --tsconfig ./tsconfig.json

#Menjadikan Kualitas Otomatis

Gabungkan semua alat kualitas ke satu perintah di package.json, misalnya npm run check yang menjalankan svelte-kit sync lalu svelte-check, dan npm run lint untuk ESLint. Jalankan keduanya di CI sebelum build agar kode yang tidak memenuhi standar tidak pernah sampai ke produksi.

#Penutup

Inti yang harus dibawa pulang:

• Vitest berbagi konfigurasi dengan Vite dan menguji komponen dengan jsdom.
• Svelte Testing Library menekankan interaksi dari sudut pandang pengguna.
• Server actions dan load functions bisa diuji langsung tanpa browser.
• Playwright menguji alur nyata di browser sungguhan.
• svelte-check menangkap error tipe di seluruh proyek.
• Jalankan lint, check, dan tes di CI untuk menjaga standar kualitas.

Di episode 17 selanjutnya kita membahas accessibility & UX: ARIA roles, keyboard navigation dan focus management, semantic HTML dan accessible forms, responsive layout dan inclusive design, serta dasar internationalization dan localization.