Belajar React Native - Testing & Tooling

#Pendahuluan

Makin banyak fitur, makin besar risiko satu perubahan kecil merusak yang lain. Tanpa test, regresi hanya terdeteksi saat user mengeluh di review store. Testing yang baik adalah jaring pengaman yang membuat tim berani mengubah kode.

Episode 20 membahas testing dan tooling di React Native: Jest dengan React Native Testing Library untuk unit test, Detox untuk end-to-end, CI/CD dengan GitHub Actions, Fastlane dan EAS Build untuk distribusi, serta update over-the-air dengan EAS Update.

#Unit Test dengan Jest dan RNTL

#Setup Jest

Jest adalah test runner default project React Native. Untuk mengetes komponen, tambahkan React Native Testing Library:

npm install -D @testing-library/react-native

#Menulis Test Komponen

Test komponen mensimulasikan interaksi user dan memeriksa hasilnya:

Unit test untuk Counter

import { render, fireEvent } from "@testing-library/react-native";
import { Counter } from "./Counter";
 
test("counter bertambah saat tombol ditekan", () => {
  const { getByText } = render(<Counter />);
  fireEvent.press(getByText("Tambah"));
  expect(getByText("1")).toBeTruthy();
});

fireEvent.press(getByText("Tambah")) mensimulasikan ketukan tombol, lalu assertion memeriksa bahwa angka baru tampil. Test ini berjalan tanpa emulator — cukup cepat untuk dijalankan di setiap commit.

#Apa yang Diuji

Unit test difokuskan pada logika dan perilaku: state berubah dengan benar, handler terpanggil dengan argumen yang tepat, dan kondisi loading atau error tampil sesuai. Jangan menguji detail implementasi seperti pemanggilan internal — uji perilaku yang bisa dilihat user.

#E2E dengan Detox

#Kapan Membutuhkan E2E

Unit test tidak menangkap masalah integrasi antar layar atau interaksi dengan library native. Detox menjalankan aplikasi sungguhan di simulator atau emulator dan mengotomasi alur user:

npm install -D detox
npx detox init

#Menulis Test E2E

Test E2E login dengan Detox

describe("alur login", () => {
  it("berhasil masuk dengan kredensial valid", async () => {
    await device.reloadReactNative();
    await element(by.id("email")).typeText("user@example.com");
    await element(by.id("password")).typeText("rahasia");
    await element(by.id("login-button")).tap();
    await expect(element(by.id("beranda"))).toBeVisible();
  });
});

element(by.id("email")) memilih elemen lewat testID — tambahkan testID di komponen agar test stabil. Detox menjalankan seluruh aplikasi, jadi perlu emulator dan build yang sesuai.

#CI/CD dengan GitHub Actions

#Pipeline Otomatis

CI/CD menjalankan test dan build di setiap perubahan tanpa campur tangan manusia. Contoh workflow GitHub Actions:

name: ci
on:
  push:
    branches: [main]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm test

Workflow di atas menginstall dependency dan menjalankan unit test di setiap push ke main. Untuk Android, tambahkan job yang menjalankan build Gradle; untuk iOS, gunakan runner macOS.

#Env dan Secret di CI

Secret seperti signing key dan token akses disimpan di GitHub Secrets, bukan di kode. Pipeline membaca secret lewat variabel environment dan memakainya saat build — konsisten dengan kebiasaan dari episode 13.

#Distribusi: Fastlane dan EAS Build

#Fastlane untuk Build Native

Fastlane mengotomasi build dan distribusi aplikasi native: mengelola signing, build, upload ke TestFlight dan Play Console:

cd ios
bundle exec fastlane beta

fastlane beta menjalankan lane yang sudah dikonfigurasi di Fastfile — mengambil profile signing, membangun, dan mengunggah build.

#EAS Build untuk Expo

Untuk project Expo, EAS Build menjalankan build native di cloud dengan profil per environment:

npx eas build --profile production --platform android

npx eas build --profile production membangun APK atau AAB produksi di server EAS tanpa setup local native.

#Update Over-the-Air

#EAS Update

Perubahan kecil seperti perbaikan bug UI tidak perlu menunggu review store. EAS Update mengirim bundle JavaScript langsung ke perangkat:

npx eas update --channel production --message "perbaikan logout"

Update ini hanya berlaku untuk kode JavaScript — perubahan native tetap butuh build store. Aturan praktis: perbaikan JS lewat OTA, perubahan native lewat build.

#Penutup

Episode 20 melengkapi rantai kualitas: Jest dan RNTL untuk unit test, Detox untuk E2E, CI/CD dengan GitHub Actions, Fastlane dan EAS Build untuk distribusi, serta EAS Update untuk perbaikan over-the-air.

Inti yang harus dibawa pulang:

• Jest dan RNTL mengetes perilaku komponen tanpa emulator.
• Detox mengotomasi alur user di aplikasi sungguhan.
• CI/CD menjalankan test dan build di setiap perubahan.
• Secret disimpan di CI secrets, bukan di kode.
• Fastlane untuk build native; EAS Build untuk cloud build Expo.
• Update OTA hanya untuk JavaScript, bukan perubahan native.

Di episode 21 selanjutnya kita akan membahas fitur modern dan roadmap: rilis React Native 0.86 dan siklusnya, arah pengembangan New Architecture dan React 19, perbaikan aksesibilitas, serta posisi Expo SDK dan reactnative.directory di ekosistem.