Belajar Microfrontend - Testing Microfrontend

#Pendahuluan

Microfrontend berarti banyak aplikasi — dan banyak aplikasi butuh strategi testing yang terstruktur. Kita tidak bisa mengandalkan satu suite raksasa; kita butuh lapisan-lapisan test yang sesuai dengan batas antar remote.

Mengapa penting? Karena kesalahan sering terjadi justru di batas antar remote — kontrak props, event, atau navigasi yang tidak cocok. Testing yang baik menangkap ini sebelum sampai produksi.

#Unit Test Remote

Setiap remote di-test secara unit dengan Vitest (Vite) atau Jest — komponen, hooks, store, dan event logic-nya sendiri, terisolasi dari remote lain:

import { describe, it, expect } from 'vitest'
import { useCartStore } from 'shared-state'
 
it('menambah cart publikasikan event', () => {
  const listener = vi.fn()
  window.addEventListener('cart:updated', listener)
  useCartStore.getState().addToCart(2)
  expect(listener).toHaveBeenCalledWith(expect.objectContaining({
    detail: { cartCount: 2 },
  }))
})

Unit test menjaga logika internal remote tetap sehat dan cepat.

#Integration Test (Micro Frontend)

Untuk menguji interaksi antar remote (navigasi antar remote, shared state, session), jalankan integration test dengan Playwright/Cypress — host + beberapa remote, dengan remote lain di-mock agar deterministik:

test('user menambahkan ke cart lalu checkout', async ({ page }) => {
  await page.goto('/catalog')
  await page.click('[data-testid="add-to-cart"]')
  await page.goto('/cart')
  await expect(page.getByText('1 item')).toBeVisible()
  await page.goto('/checkout')
  await expect(page).toHaveTitle(/Checkout/)
})

Integration test menguj alur nyata: catalog → detail → cart → checkout.

#Contract Test

Karena remote berkomunikasi lewat props/events (kontrak), kita perlu menguji kontrak itu di batas unit:

• Test kontrak props: remote menerima props tertentu → merender dengan benar; jika props hilang/salah bentuk → fallback.
• Test kontrak event: remote mempublikasikan event yang terdokumentasi dengan payload benar.

Ini — bersama test di episode 17 — memastikan perubahan satu remote tidak merusak kontrak yang diandalkan remote lain.

#Visual Regression

Design system dan halaman remote diuji secara visual dengan snapshot (Percy/Playwright screenshot). Ini mendeteksi perubahan tampilan tak terduga akibat perubahan CSS/token:

pnpm --filter design-system exec playwright test --config=visual.config.ts

#Test Host: Stub Remote

Saat menguji host, kita tidak mau memuat remote sungguhan (flaky, butuh banyak app). Sebagai gantinya, stub remote — ganti module remote dengan fake sederhana yang deterministik:

vi.mock('catalog/CatalogApp', () => ({
  default: () => <div>Stub Catalog</div>,
}))
// atau di Playwright: route/mock network ke manifest & chunk remote

Dengan stub, test host fokus pada logika host (routing, layout, fallback) tanpa bergantung pada remote sungguhan.

#Penutup

Pada episode 20 ini, kalian telah memahami testing microfrontend.

Inti yang harus dibawa pulang:

• Unit test per remote (Vitest/Jest): komponen, hooks, store, event.
• Integration test (Playwright): host + remote (dengan mocks) — navigasi, shared state, session.
• Contract test: pastikan props/events antar remote sesuai kontrak.
• Visual regression: snapshot design-system & halaman remote.
• Test host dengan stub remote agar deterministik.

Di episode 21 selanjutnya, kita akan membahas accessibility & theming — tanggung jawab aksesibilitas per remote, ARIA defaults di design-system, focus management antar remote, dan theming dark mode bersama dengan CSS variables. Pastikan test kalian hijau!