Unit Testing dengan Vitest — Testing

Apa itu Vitest? Vitest adalah test runner modern untuk project JavaScript/TypeScript. Dibangun di atas Vite, sehingga sangat cepat dan mendukung ESM…

Vitest adalah test runner: program yang mencari file test-mu, menjalankan tiap test di dalamnya, lalu melaporkan mana yang lulus dan mana yang gagal. Bayangin guru yang memeriksa ujian pakai kunci jawaban. Tiap soal dicocokkan dengan kuncinya, yang benar dihitung, lalu nilainya ditulis di pojok kertas. Di Vitest, describe adalah satu bagian ujian (misalnya Matematika), it adalah satu soal, dan expect(...).toBe(...) adalah mencocokkan jawaban dengan kuncinya.

🧪 Tebakan cepat: Dua test memakai variabel counter yang sama, mulai dari 0. Test pertama memanggil increment() sekali dan berharap counter jadi 1. Test kedua memanggil increment() dua kali dan berharap counter jadi 2. Test kedua lulus atau gagal? Jawabannya ada di bagian "beforeEach: tiap test mulai dari nol".

Test runner itu sebenarnya sederhana

Sebelum memakai Vitest, lihat dulu apa yang dikerjakannya. Ini test runner buatan sendiri:

function tambah(a, b) {
  return a + b;
}

function kali(a, b) {
  return a * b;
}

function runTests() {
  let passed = 0;
  if (tambah(2, 3) === 5) passed++;
  if (kali(3, 4) === 12) passed++;
  if (tambah(-1, 1) === 0) passed++;
  return passed;
}

console.log(runTests()); // 3

Vitest melakukan hal yang sama, plus memberi nama tiap pemeriksaan, menjalankan semua file test, dan menunjukkan persis mana yang gagal.

Pasang dan jalankan Vitest

npm install -D vitest

Vitest mencari file yang namanya berakhiran .test.js atau .spec.js (juga .ts, .jsx, .tsx). Lalu jalankan:

Biasanya keduanya ditulis di package.json sebagai "test": "vitest" dan "test:run": "vitest run".

Menulis test pertama

// math.test.js
import { describe, it, expect } from "vitest";
import { tambah, kali } from "./math.js";

describe("math", () => {
  it("menjumlahkan dua angka", () => {
    expect(tambah(2, 3)).toBe(5);
  });

  it("mengalikan dua angka", () => {
    expect(kali(3, 4)).toBe(12);
  });
});

Kalau kali salah tulis jadi a + b, npx vitest run --reporter=verbose (opsi --reporter=verbose menampilkan tiap test, bukan cuma yang gagal) mencetak:

 ✓ math.test.js > math > menjumlahkan dua angka 1ms
 × math.test.js > math > mengalikan dua angka 3ms
   → expected 7 to be 12 // Object.is equality

 Test Files  1 failed (1)
      Tests  1 failed | 1 passed (2)

Bacanya: expected 7 to be 12 artinya kodemu menghasilkan 7, padahal test-nya berharap 12. Angka pertama selalu hasil kodemu.

beforeEach: tiap test mulai dari nol

let counter = 0;

function increment() {
  counter++;
}

describe("increment", () => {
  beforeEach(() => {
    counter = 0; // jalan sebelum SETIAP test di blok ini
  });

  it("menaikkan counter satu kali", () => {
    increment();
    expect(counter).toBe(1);
  });

  it("mulai dari 0 lagi, bukan lanjut dari test sebelumnya", () => {
    increment();
    increment();
    expect(counter).toBe(2);
  });
});
Saat Tanpa reset Dengan beforeEach
Test 1 mulai counter 0 counter 0
Test 1 selesai 1, lulus 1, lulus
Test 2 mulai 1, sisa test 1 0, direset
Test 2 selesai 3, gagal: expected 3 to be 2 2, lulus

Tanpa reset, test kedua gagal, karena counter masih membawa angka dari test pertama. Itu jawaban tebakannya.

Ada empat hook (fungsi yang dijalankan Vitest di sekitar test):

⚠️ Jebakan yang sering ketemu

TL;DR: Vitest adalah test runner: dia menjalankan tiap test di file .test.js dan melaporkan yang lulus dan gagal. describe mengelompokkan, it (atau test) adalah satu test, expect(hasil).toBe(harapan) membandingkan. npx vitest berjalan dalam mode watch, npx vitest run jalan sekali. Di pesan expected 7 to be 12, angka pertama hasil kodemu. beforeEach jalan sebelum setiap test, jadi pakai dia untuk reset keadaan, afterEach setelah setiap test, beforeAll dan afterAll sekali sebelum dan sesudah semuanya.

Yang akan kamu pelajari