Testing & Debugging

Tujuan Pembelajaran

• Menulis unit test dengan Jest
• Testing komponen React Native
• Teknik debugging efektif di Expo

A. Setup Jest (sudah include di Expo)

bash
# Jalankan test
npm test

B. Unit Testing Fungsi

Buat file tests/helpers.test.js:

jsx
// 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

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

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

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

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

D. Debugging di Expo

Console Logging

jsx
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

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

F. Latihan Mandiri

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