0Pricing
Frontend Academy · Pelajaran

Penyiapan Jest dan Test Dasar

Instal Jest, tulis test describe/it/expect, gunakan matcher seperti toBe dan toEqual, lalu jalankan test dalam mode watch selama pengembangan.

Penyiapan Jest dan Test Dasar adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Mengapa Menguji Kode Frontend?

Pengujian menangkap regresi saat Anda mengubah kode. Pengujian mendokumentasikan perilaku yang diharapkan. Pengujian memberi Anda keyakinan untuk melakukan refaktor. Tanpa pengujian, setiap perubahan menjadi pertaruhan karena sesuatu yang lain mungkin rusak.

Memasang Jest

Untuk proyek Vite + React, gunakan Vitest (pelaksana pengujian yang kompatibel dengan Jest dan dirancang khusus untuk Vite). Untuk konfigurasi lainnya, pasang Jest dengan babel-jest atau ts-jest untuk TypeScript.

# Vitest (preferred for Vite projects):
npm install -D vitest

# Or Jest with TypeScript:
npm install -D jest @types/jest ts-jest

Penamaan File Pengujian

Letakkan file pengujian di samping sumbernya: Button.test.ts, utils.spec.ts. Atau di dalam folder __tests__/. Jest menemukan file yang cocok dengan *.test.* atau *.spec.*.

describe, it, expect

Susun pengujian dengan blok describe (kelompok) dan fungsi it/test (pengujian individual). Buat pernyataan dengan expect.

import { add, formatCurrency } from './utils';

describe('Math utils', () => {
  it('adds two numbers', () => {
    expect(add(2, 3)).toBe(5);
  });

  it('handles negative numbers', () => {
    expect(add(-1, 1)).toBe(0);
  });
});

describe('Currency formatting', () => {
  it('formats USD', () => {
    expect(formatCurrency(1234.5, 'USD')).toBe('$1,234.50');
  });
});

Pencocok Umum

Jest menyediakan banyak pencocok: toBe (kesetaraan ketat), toEqual (kesetaraan mendalam), toContain, toHaveLength, toBeNull, toBeTruthy, toBeFalsy, toThrow, dan toBeGreaterThan.

expect([1,2,3]).toHaveLength(3);
expect({ a: 1, b: 2 }).toEqual({ a: 1, b: 2 });
expect('hello world').toContain('world');
expect(() => { throw new Error('boom'); }).toThrow('boom');
expect(null).toBeNull();
expect(true).toBeTruthy();

Menguji Kode Asinkron

Kembalikan promise atau gunakan async/await dalam pengujian. Jest menunggu promise selesai sebelum menandai pengujian sebagai selesai.

it('fetches user data', async () => {
  const user = await fetchUser(1);
  expect(user.name).toBe('Alice');
});

// Or with resolves/rejects matchers:
it('resolves with user', () => {
  return expect(fetchUser(1)).resolves.toMatchObject({ name: 'Alice' });
});

beforeEach dan afterEach

Jalankan penyiapan dan pembersihan sebelum/sesudah setiap pengujian agar pengujian tetap terisolasi.

describe('User service', () => {
  beforeEach(() => {
    db.seed();
  });
  afterEach(() => {
    db.clear();
  });
  it('creates a user', async () => {
    const user = await userService.create({ name: 'Alice' });
    expect(user.id).toBeDefined();
  });
});

Menjalankan Pengujian

npm test menjalankan semua pengujian. npm test -- --watch (Jest) atau vitest dalam mode watch menjalankan ulang pengujian saat file berubah. Antarmuka Vitest (vitest --ui) menyediakan pelaksana pengujian berbasis peramban.

Cakupan Pengujian

jest --coverage (atau vitest run --coverage) menghasilkan laporan cakupan yang menunjukkan baris mana yang diuji. Target cakupan 70% atau lebih merupakan sasaran umum tim. Cakupan 100% tidak berarti kode bebas dari kesalahan.

Menulis Kode yang Mudah Diuji

Fungsi murni (tanpa efek samping) sangat mudah diuji. Buat fungsi tetap kecil dan terfokus. Masukkan dependensi sebagai argumen, bukan mengimpornya secara langsung — hal ini memudahkan penggantian dengan pengganti pengujian.

Isolasi Pengujian

Setiap pengujian harus sepenuhnya independen. Pengujian yang bergantung pada efek samping satu sama lain mudah rusak. Hindari status yang dapat diubah dan dibagikan antar pengujian. Atur ulang semua mock dalam afterEach.

Pemeriksaan Singkat

Pencocok Jest mana yang memeriksa kesetaraan mendalam dua objek?

Rangkuman: Dasar-Dasar Jest

describe mengelompokkan pengujian. it/test mendefinisikan pengujian individual. expect + pencocok memverifikasi hasil. Gunakan toBe untuk nilai primitif. Gunakan toEqual untuk objek/larik. Lakukan pengujian asinkron dengan async/await atau dengan mengembalikan promise. Gunakan beforeEach/afterEach untuk isolasi. Laporan cakupan menunjukkan baris mana yang diuji. Fungsi murni adalah yang paling mudah diuji.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Penyiapan Jest dan Test Dasar” gratis?

Ya — teks lengkap “Penyiapan Jest dan Test Dasar” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Penyiapan Jest dan Test Dasar”?

Instal Jest, tulis test describe/it/expect, gunakan matcher seperti toBe dan toEqual, lalu jalankan test dalam mode watch selama pengembangan. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Penyiapan Jest dan Test Dasar” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Penyiapan Jest dan Test Dasar
  2. @testing-library/react: render, userEvent
  3. @testing-library/vue: memasang komponen
  4. Mocking Modul dan Pemanggilan API
← Kembali ke Frontend Academy