FluentStack

Vitest Basics

Mode tersedia: dark, light, paper
MasukDaftar
Advanced · Level 13: TestingAdvanced70 menitBahasa Indonesia

Vitest Basics

Menulis file test Vitest sederhana, memberi assertion yang jelas, dan menjalankan test di project lokal.

StatusMemuat progres
ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

  • Menjelaskan peran Vitest sebagai test runner dan assertion API
  • Mengenali penamaan file .test.ts atau .spec.ts
  • Menulis describe, it, dan expect untuk function kecil
  • Menjalankan test melalui npm script di local project
VitestUnit TestnpmAssertions

Isi lesson

7 blok
  1. 1.
    Test runner memberi cara konsisten untuk menjalankan assertionBelum selesaiWajib
  2. 2.
    Pasang Vitest di project lokalBelum selesaiWajib
  3. 3.
    Satu function, satu file test yang jelasBelum selesaiWajib
  4. 4.
    Coding practiceBelum selesaiWajib
  5. 5.
    Cek pemahamanBelum selesaiWajib
  6. 6.
    Jalankan command satu per satu saat setupBelum selesaiWajib
  7. 7.
    RingkasanBelum selesaiWajib

Test runner memberi cara konsisten untuk menjalankan assertion

Wajib

Vitest menemukan file test, menjalankan test case, lalu melaporkan assertion yang lulus atau gagal. Untuk mulai kecil, simpan code dan test secara berdekatan, misalnya format-duration.ts serta format-duration.test.ts. describe mengelompokkan behavior, it memberi nama satu case, dan expect menyatakan hasil yang diharapkan. Setup test dapat berbeda antara Vite, Next.js, dan project yang sudah memiliki tooling sendiri. FluentStack membaca struktur test, bukan menjalankan Vitest di project atau browser-mu.

Bagian ini memengaruhi progres lesson.

Pasang Vitest di project lokal

Wajib
bash
npm install -D vitest

Jalankan dari folder yang memiliki package.json. Setelah dependency muncul di devDependencies, tambahkan atau sesuaikan test script mengikuti setup project. Jangan mengganti config hanya karena menyalin satu contoh dari stack yang berbeda.

Bagian ini memengaruhi progres lesson.

Satu function, satu file test yang jelas

Wajib
ts
// format-duration.ts
export function formatDuration(minutes: number) {
  return minutes + " menit";
}

// format-duration.test.ts
import { describe, expect, it } from "vitest";
import { formatDuration } from "./format-duration";

describe("formatDuration", () => {
  it("adds the menit label", () => {
    expect(formatDuration(24)).toBe("24 menit");
  });
});

File test mengimport public function yang ingin dilindungi lalu menguji contract-nya. Jalankan npm run test hanya setelah script test benar-benar tersedia di package.json. Practice workspace tidak dapat membuktikan konfigurasi atau result terminal project lokal.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Write format duration Vitest test

Tambahkan test file Vitest untuk function formatDuration dengan assertion output yang mudah dibaca. Preview tidak menjalankan npm test.

Tujuan awal: Fokus di tab TSX.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

4 cek otomatis5 checklist
Belum selesaiBuka practice

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Apa manfaat utama nama test seperti adds the menit label dibanding nama test satu?

Progres lesson naik setelah jawaban benar.

Peringatan

Wajib

Jalankan command satu per satu saat setup

Jangan langsung memasang Vitest, React Testing Library, environment DOM, config, dan coverage tool sekaligus. Mulai dari satu unit test yang bisa berjalan, lalu baca outputnya. Jika terminal berkata module atau environment belum tersedia, perbaiki penyebabnya berdasarkan dokumentasi tool dan framework yang benar-benar dipakai project-mu.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib
  • Vitest menjalankan test file dan melaporkan assertion.
  • describe, it, dan expect membantu menulis test yang mudah dibaca.
  • File test biasanya memakai nama .test atau .spec sesuai konfigurasi project.
  • Local terminal adalah sumber kebenaran untuk result Vitest, bukan practice workspace.
  • Berikutnya, React Testing Library menguji output component seperti yang ditemukan user.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Test runner memberi cara konsisten untuk menjalankan assertion.

Memuat progresReview module