Tujuan Pembelajaran

Memahami jenis-jenis testing
Bisa menulis unit test dengan Jest/Vitest

Analogi

Diagram


      Testing = Pemeriksaan Kesehatan:

Unit Test = Cek Darah (1 komponen)
Integration Test = Cek Jantung (beberapa komponen bersama)
E2E Test = Medical Checkup Lengkap (seluruh sistem)

Testing seperti medical checkup — memastikan semua berfungsi normal

Penjelasan Konsep

Testing

Testing adalah proses memverifikasi bahwa kode kamu berfungsi sesuai ekspektasi. Ada 3 jenis utama:

Unit Test

→ Test 1 fungsi/komponen secara isolasi.

Cepat, banyak, fokus pada logic.
Tools: Jest, Vitest, Mocha.

Integration Test

→ Test beberapa komponen bersama.

Verifikasi mereka berinteraksi dengan benar.

E2E (End-to-End) Test

→ Test seluruh aplikasi dari user perspective.

Tools: Playwright, Cypress, Selenium.

Testing Pyramid

E2E (sedikit) → Integration (sedang) → Unit (banyak)

Inti yang Perlu Dipahami

Bagian ini berfokus pada memahami jenis-jenis testing., dan bisa menulis unit test dengan Jest/Vitest. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

Saat membaca Testing, gunakan tujuan belajar sebagai penanda arah. Kalau kamu sudah bisa menjelaskan tujuan itu dengan kata-katamu sendiri, berarti fondasinya mulai terbentuk.

Cara Membayangkannya

Testing seperti medical checkup — memastikan semua berfungsi normal. Analogi ini dipakai supaya konsep teknis tidak terasa melayang. Hubungkan setiap istilah dengan perannya: siapa yang meminta, siapa yang memproses, data apa yang berpindah, dan hasil apa yang diharapkan.

Kalau analoginya sudah terasa masuk akal, barulah lihat istilah teknisnya. Cara ini membuat materi lebih mudah dipahami daripada langsung menghafal definisi.

Saat Melihat Contoh Kode

Contoh kode pada chapter ini memakai bahasa javascript. Bacalah contoh kode sebagai ilustrasi alur, bukan sebagai bagian yang harus langsung dihafal. Baris 2-14: Unit test fungsi. Baris 16-24: React component test.

Perhatikan nama fungsi, urutan langkah, dan data yang berpindah. Biasanya tiga hal itu sudah cukup untuk memahami hubungan antara teori dan praktik.

Konteks dalam Perjalanan Belajar

Setiap konsep di platform ini dipilih karena dipakai di industri. Fokus pada pemahaman, bukan hafalan.

Kamu sedang membangun skill inti. Setelah bagian ini, kamu bisa memilih spesialisasi sesuai minat: frontend, backend, atau DevOps.

Gunakan pertanyaan reflektif dan prompt AI di akhir chapter sebagai latihan aktif. Membaca saja tidak cukup — kamu perlu menjelaskan ulang dengan kata-katamu sendiri.

Contoh Kode

javascript

// UNIT TEST DENGAN VITEST
import { describe, it, expect } from 'vitest';
import { sum, validateEmail } from './utils';

describe('sum', () => {
  it('adds 1 + 2 to equal 3', () => {
    expect(sum(1, 2)).toBe(3);
  });
  
  it('handles negative numbers', () => {
    expect(sum(-1, -2)).toBe(-3);
  });
});

describe('validateEmail', () => {
  it('returns true for valid email', () => {
    expect(validateEmail('test@example.com')).toBe(true);
  });
  
  it('returns false for invalid email', () => {
    expect(validateEmail('not-an-email')).toBe(false);
  });
});

// REACT COMPONENT TEST
import { render, screen, fireEvent } from '@testing-library/react';
import Counter from './Counter';

it('increments counter on click', () => {
  render(<Counter />);
  const button = screen.getByText('Increment');
  fireEvent.click(button);
  expect(screen.getByText('Count: 1')).toBeInTheDocument();
});

Penjelasan Kode

Baris 2-14: Unit test fungsi. Baris 16-24: React component test.

Prompt AI

Jelaskan bedanya TDD (Test-Driven Development) dan BDD.

Pertanyaan Reflektif

Tulis unit test untuk 3 fungsi utama di proyekmu. Run dengan npm test.