Belajar Nuxt - Testing & Quality

#Pendahuluan

Semakin besar aplikasi, semakin mahal bug yang ditemukan di produksi. Episode 16 membahas cara menjaga kualitas dengan pengujian: unit test untuk logika murni, component test untuk perilaku komponen, dan end-to-end test untuk alur pengguna yang utuh.

Kami akan memakai Vitest sebagai test runner dan Playwright untuk E2E — keduanya berada di ekosistem yang sama dengan Nuxt, sehingga integrasinya mulus. Ditambah type checking dan linting, kalian akan punya jaring pengaman yang menangkap masalah sebelum sampai ke pengguna.

#Unit Testing dengan Vitest

#Setup Vitest untuk Nuxt

Install Vitest dan module test utility Nuxt:

npm install --save-dev vitest @vue/test-utils @nuxt/test-utils

Tambahkan script test di package.json:

Script test

{
  "scripts": {
    "test": "vitest run"
  }
}

#Menulis Unit Test Pertama

Mulai dari logika murni — tempat paling mudah diuji. Ambil getter store atau fungsi util:

test/hitung-total.test.ts

import { describe, expect, it } from "vitest"
 
function hitungTotal(harga: number[], diskon: number) {
  const dasar = harga.reduce((a, b) => a + b, 0)
  return dasar - (dasar * diskon) / 100
}
 
describe("hitungTotal", () => {
  it("menghitung total tanpa diskon", () => {
    expect(hitungTotal([100000, 50000], 0)).toBe(150000)
  })
 
  it("menerapkan diskon persen", () => {
    expect(hitungTotal([100000], 10)).toBe(90000)
  })
})

describe dan it mengelompokkan dan mendefinisikan kasus uji, expect memeriksa hasil. Jalankan dengan:

npm test

Unit test seperti ini berjalan cepat dan bisa dijalankan berkali-kali — jadi fondasi pipa pengujian kalian.

#Component Testing dengan Vue Test Utils

#Merender Komponen dalam Test

Vue Test Utils memungkinkan merender komponen di environment test. Test komponen KartuProduk:

test/kartu-produk.test.ts

import { describe, expect, it } from "vitest"
import { mount } from "@vue/test-utils"
import KartuProduk from "~/components/KartuProduk.vue"
 
describe("KartuProduk", () => {
  it("menampilkan nama dan harga", () => {
    const wrapper = mount(KartuProduk, {
      props: { nama: "Sneakers", harga: 250000 },
    })
 
    expect(wrapper.text()).toContain("Sneakers")
    expect(wrapper.text()).toContain("250000")
  })
})

mount(KartuProduk, { props: {...} }) merender komponen dengan props tertentu, lalu wrapper.text() memeriksa isi yang tampil. Component test sangat berguna untuk menangkap regresi di UI yang sering berubah.

#Integration Testing dan E2E Testing dengan Playwright

#Setup Playwright

Install Playwright lalu siapkan browser:

npm install --save-dev @playwright/test
npx playwright install chromium

#Test E2E Alur Pembelian

E2E menguji alur seperti pengguna sungguhan: buka halaman, klik, isi form, dan cek hasil:

e2e/beli.spec.ts

import { expect, test } from "@playwright/test"
 
test("pengguna bisa checkout", async ({ page }) => {
  await page.goto("/produk")
  await page.getByRole("button", { name: "Beli" }).first().click()
  await page.goto("/keranjang")
  await expect(page.getByText("Sneakers")).toBeVisible()
})

Test ini menjalankan aplikasi nyata di browser. page.getByRole dan page.getByText memilih elemen dengan cara yang mirip cara pengguna dan screen reader menemukannya — pola yang juga memperkuat accessibility.

#Menjalankan E2E

Playwright memerlukan server berjalan. Biasanya dijalankan setelah build produksi:

npm run build
npx playwright test

Pola ini mengecek bahwa aplikasi produksi benar-benar berfungsi — bukan hanya kode yang lolos compile.

#Static Analysis dan Type Checking

#Type Checking Otomatis

Nuxt sudah memakai TypeScript, tapi type check hanya berjalan saat dijalankan eksplisit. Buat menjadi bagian rutin:

npx nuxi typecheck

Jalankan npx nuxi typecheck sebelum setiap merge untuk menangkap error tipe lebih awal. Pasangkan dengan ESLint dari episode 3 sehingga gaya kode dan tipe terpantau sekaligus.

#Menjadi Bagian dari CI

Test yang tidak dijalankan otomatis akan dilupakan. Episode 19 akan menautkan langkah-langkah ini ke CI/CD sehingga setiap pull request diuji secara otomatis.

#Penutup

Episode 16 melengkapi jaring pengaman kualitas kalian: unit test dengan Vitest untuk logika murni, component test dengan Vue Test Utils untuk perilaku komponen, E2E test dengan Playwright untuk alur pengguna utuh, serta type checking dan linting yang terintegrasi.

Inti yang harus dibawa pulang:

• Vitest dan @nuxt/test-utils adalah pilihan utama test runner Nuxt.
• Unit test untuk logika murni, component test untuk perilaku UI.
• Playwright menguji alur pengguna nyata di browser.
• Selector berbasis peran memperkuat accessibility sekaligus testing.
• Jalankan npx nuxi typecheck dan ESLint secara rutin.
• Integrasikan semua test ke CI agar tidak terlewat.

Di episode 17 selanjutnya kita akan membahas accessibility dan UX — dukungan ARIA, navigasi keyboard dan manajemen fokus, HTML semantik dengan komponen yang mudah diakses, responsive design dengan adaptive layouts, serta dasar internasionalisasi. Toko kalian akan ramah untuk semua pengguna.