🔬 Praktikum 11: Testing & Debugging

Tujuan Praktikum

Menulis unit test dengan Jest

Testing komponen React Native

Teknik debugging efektif di Expo

A. Setup Jest (sudah include di Expo)

# Jalankan test
npm test

B. Unit Testing Fungsi

Buat file __tests__/helpers.test.js:

// utils/helpers.js
export function hitungDiskon(harga, persen) {
  return harga - (harga * persen / 100);
}

export function formatRupiah(angka) {
  return 'Rp ' + angka.toLocaleString('id-ID');
}

// __tests__/helpers.test.js
import { hitungDiskon, formatRupiah } from '../utils/helpers';

describe('hitungDiskon', () => {
  test('diskon 10% dari 100000', () => {
    expect(hitungDiskon(100000, 10)).toBe(90000);
  });

  test('diskon 0% tidak berubah', () => {
    expect(hitungDiskon(50000, 0)).toBe(50000);
  });

  test('diskon 100% jadi 0', () => {
    expect(hitungDiskon(50000, 100)).toBe(0);
  });
});

describe('formatRupiah', () => {
  test('format angka ke Rupiah', () => {
    expect(formatRupiah(50000)).toContain('Rp');
  });
});

C. Component Testing

npm install --save-dev @testing-library/react-native

// __tests__/Counter.test.js
import { render, fireEvent, screen } from '@testing-library/react-native';
import Counter from '../components/Counter';

test('counter increment bekerja', () => {
  render();
  const button = screen.getByText('+');
  fireEvent.press(button);
  expect(screen.getByText('1')).toBeTruthy();
});

test('counter decrement bekerja', () => {
  render();
  const minus = screen.getByText('-');
  fireEvent.press(minus);
  expect(screen.getByText('-1')).toBeTruthy();
});

D. Debugging di Expo

Console Logging

console.log('Data:', JSON.stringify(data, null, 2));
console.warn('Peringatan: data kosong');
console.error('Error:', error.message);

Expo DevTools

Tekan 'm' di terminal untuk buka menu developer

Tekan 'j' untuk buka JavaScript debugger

Gunakan React DevTools untuk inspect component tree

Network Debugging

Gunakan Flipper atau React Native Debugger

Inspect API requests/responses

Monitor network performance

E. Test Coverage Report

npm test -- --coverage
# Lihat report di folder coverage/lcov-report/index.html

F. Tugas Praktikum 11

1. Buat file helpers.js dengan minimal 3 fungsi utility

2. Tulis unit test untuk setiap fungsi (minimal 2 test case per fungsi)

3. Jalankan test dan screenshot hasil PASS

4. Screenshot coverage report

5. Dokumentasikan 1 bug yang ditemukan saat debugging