Sebuah tim frontend meluncurkan lapisan mocking API yang type-safe yang hanya ada di lingkungan pengembangan. Dengan menggunakan Axios interceptor dan tree-shaking dari Vite, bundle produksi tetap tidak tersentuh. Para engineer mengambil data dengan pola biasa mereka sambil menunggu endpoint backend, lalu cukup mengubah satu flag lingkungan untuk mengakses API yang asli.

Mengapa tim membutuhkan cara yang lebih baik untuk melakukan mocking

Developer frontend menemui hambatan ketika rute backend belum selesai. Solusi cepat—seperti melakukan hard-coding respons di dalam komponen atau menyebarkan blok if (process.env.NODE_ENV === 'development') di seluruh UI—membuat aplikasi tetap berjalan tetapi meninggalkan utang teknis (technical debt). Objek mock tersebut menjadi bagian dari logika komponen, meningkatkan risiko pengiriman data palsu ke produksi, dan membuat kode lebih sulit dibaca serta diuji.

Tim ingin memindahkan setiap mock keluar dari component tree, menegakkan kontrak antara frontend dan backend, serta menjamin tidak ada hal ekstra yang masuk ke dalam build produksi.

Proses tiga langkah yang diikuti oleh tim

  1. Pertemuan kontrak – Engineer frontend dan backend duduk bersama dan mencatat setiap permintaan, URL, metode, dan payload yang diharapkan.
  2. Kontrak bertipe (Typed contract) – Mereka mengubah daftar tersebut menjadi sebuah interface TypeScript yang menjadi satu-satunya sumber kebenaran (single source of truth) untuk bentuk permintaan dan respons.
  3. Penyambungan interceptor – Sebuah Axios interceptor memeriksa setiap permintaan yang keluar. Jika URL cocok dengan mock yang terdaftar, interceptor akan mengembalikan data mock; jika tidak, permintaan akan diteruskan ke server asli.

Karena interceptor adalah satu-satunya tempat logika mock berada, kode komponen tetap tidak berubah. Developer tetap menggunakan hook pengambilan data normal mereka—seperti useQuery—tanpa menambahkan logika kondisional apa pun.

Bagaimana menghindari pembengkakan (bloat) pada produksi

Tim menerapkan tiga pengaman yang memungkinkan Rollup (bundler yang digunakan oleh Vite) menghapus kode mock sepenuhnya saat melakukan build untuk produksi:

  • import.meta.env.DEV bernilai false dalam build produksi, sehingga seluruh modul interceptor hilang selama proses tree-shaking.
  • Variabel MODE diatur ke selain test saat menjalankan unit test, sehingga kode khusus pengujian tetap terpisah.
  • Sebuah flag khusus, VITE_ENABLE_MSW, secara default bernilai false dan harus diaktifkan secara eksplisit untuk mengaktifkan mock.

Ketika ketiga kondisi tersebut bernilai false, registri mock tidak akan pernah masuk ke dalam bundle akhir.

Mengorganisasi file mock

Repositori ini mengikuti tata letak yang berpusat pada fitur (feature-centric layout):

  • interfaces/ – Menyimpan definisi TypeScript yang dihasilkan dari pertemuan kontrak.
  • scenarios.ts – Berisi contoh konkret dari respons yang berhasil dan kasus kesalahan untuk setiap endpoint.
  • devHandlers.ts – Bertindak sebagai registri pusat yang memetakan URL ke data skenario dan menyambungkan interceptor ke Axios.

Sebuah skrip scaffolding kecil dapat menghasilkan file-file ini secara otomatis: berikan URL dan interface yang sesuai, dan skrip tersebut akan membuat file stub serta mendaftarkan mock-nya. Skrip ini berada di luar jalur kode produksi, sehingga tidak memengaruhi ukuran bundle.

Apa yang didapatkan oleh tim

  • Nol mock di dalam komponen – Semua data palsu berada di lapisan khusus, menjaga kode UI tetap bersih.
  • Keamanan tipe ujung-ke-ujung (End-to-end type safety) – Data mock sesuai dengan interface TypeScript yang sama dengan yang digunakan oleh respons asli, sehingga ketidakcocokan dapat dideteksi pada saat kompilasi.
  • Tanpa beban produksi – Tree-shaking menghapus interceptor dan data mock sepenuhnya, sehingga ukuran bundle tidak berubah.
  • Skenario bersama untuk dev dan test – Definisi mock yang sama digunakan untuk pengembangan lokal maupun pengujian otomatis, sehingga mengurangi duplikasi.

Trade-off dan batasan

Pendekatan ini tidak menggantikan backend asli. Jika kontrak mock menyimpang dari API yang aktif, developer baru akan menyadari ketidakcocokan tersebut setelah mereka mengubah flag lingkungan.

Apa yang perlu diperhatikan selanjutnya

  • Integrasi alat (Tooling integration) –
  • Adopsi yang lebih luas –
  • Pemantauan performa –

Kesimpulannya jelas: memindahkan logika mock ke dalam lapisan bertipe yang dibatasi oleh lingkungan memungkinkan tim frontend menjaga komponen tetap murni, tetap type-safe, dan mengirimkan build produksi tanpa muatan mock yang tersembunyi. Menjaga kontrak bersama adalah harga yang harus dibayar untuk alur kerja pengembangan yang lebih lancar dan basis kode yang lebih bersih.