Membangun Mock REST Server dengan TypeScript, Faker, Fakerest, dan MSW

Pendahuluan: Power Mock Server dalam Pengembangan Software Modern

Di era pengembangan yang serba cepat, menunggu backend API siap dapat memperlambat pengembangan frontend secara signifikan. Di sinilah mock server menjadi alat yang sangat berharga untuk mempercepat workflow pengembangan dan meningkatkan produktivitas tim.

Mock server pada dasarnya adalah simulator yang meniru perilaku backend API nyata. Dengan mock server, Anda dapat membuat respons API yang realistis tanpa harus mengimplementasikan backend sepenuhnya, memungkinkan workflow pengembangan paralel dan mengurangi ketergantungan antara tim frontend dan backend.

Apa Itu Mock Server?

Mock server adalah alat atau layanan yang mensimulasikan perilaku backend API nyata. Dengan mock server, Anda bisa mengembangkan, menguji, dan mendemokan frontend tanpa harus menunggu backend selesai. Mock server akan mengembalikan respons palsu atau data yang sudah ditentukan ke aplikasi frontend Anda.

Manfaat Menggunakan Mock Server

• Pengembangan Frontend Lebih Cepat: Mulai membangun dan menguji UI sebelum backend siap.
• Workflow Paralel: Tim frontend dan backend bisa bekerja mandiri, mengurangi bottleneck.
• Data Konsisten & Realistis: Gunakan data palsu yang realistis untuk demo, tes, dan pengembangan.
• Testing Andal: Tulis tes frontend tanpa tergantung backend.
• Prototyping Cepat: Coba ide baru dan iterasi fitur dengan mudah.
• Demo ke Stakeholder: Tampilkan fitur dengan data interaktif.
• Onboarding: Anggota tim baru bisa mulai tanpa menunggu backend.
• Efisiensi Biaya: Kurangi waktu pengembangan dan konflik alokasi sumber daya.
• Mitigasi Risiko: Uji edge case dan skenario error dengan mudah.

---

Apa Itu Library fakerest (FakeRest)?

FakeRest adalah library open source yang powerful untuk secara otomatis mengubah data JavaScript Anda menjadi REST API mock yang full-featured. Library ini sangat berharga bagi developer frontend yang perlu mensimulasikan fungsionalitas backend tanpa menulis kode server yang kompleks.

Fitur Utama FakeRest:

• Generasi REST Endpoint Otomatis: Dapatkan endpoint REST (GET, POST, PUT, DELETE) untuk setiap koleksi data tanpa menulis kode backend.
• Dukungan Query Lanjutan: Built-in support untuk filtering, sorting, pagination, dan embedding resource terkait.
• Sumber Data Fleksibel: Bekerja seamless dengan data palsu dari faker, data statis, atau data hasil generate sendiri.
• Versatilitas Pengembangan: Sempurna untuk prototyping, demo, testing frontend, dan pengembangan paralel frontend-backend.
• Opsi Integrasi Multiple: Integrasi mudah dengan Express (Node.js) dan menyediakan handler untuk MSW (Mock Service Worker).
• Perilaku API Real-world: Mensimulasikan respons API realistis termasuk HTTP status code dan header yang proper.

Mengapa Memilih FakeRest?

FakeRest menghilangkan kompleksitas setup backend server penuh sambil menyediakan fungsionalitas API grade enterprise. Sangat berguna ketika Anda perlu mendemonstrasikan relasi data kompleks dan kemampuan query advanced ke stakeholder atau selama fase pengembangan.

---

Apa Itu MSW (Mock Service Worker)?

Mock Service Worker adalah library revolusioner yang merepresentasikan generasi berikutnya dari API mocking. Berbeda dengan pendekatan mocking tradisional yang mengharuskan Anda memodifikasi kode aplikasi, MSW mencegat network request di level browser, membuat mock Anda hampir tidak bisa dibedakan dari API call nyata.

Fitur Utama MSW:

• Intersepsi Level Network: Mencegat request fetch/XHR di browser dan mengembalikan mock response berdasarkan handler Anda tanpa memodifikasi kode aplikasi.
• Dukungan Cross-Platform: Dapat digunakan di Node.js untuk automated testing (Jest, Vitest, Playwright, dll.) dan di browser untuk development.
• Integrasi Seamless: Handler bisa ditulis manual untuk kontrol fine-grained atau di-generate otomatis dari FakeRest untuk konsistensi.
• Framework Agnostic: Bekerja sempurna dengan React, Vue, Svelte, Angular, dan framework modern lainnya.
• Development & Testing: Mendukung workflow development dan strategi testing komprehensif.
• Perilaku Network Real: Mensimulasikan kondisi network aktual termasuk latency, error, dan edge case.

Mengapa MSW Game-Changing:

MSW menghilangkan masalah tradisional “mocking vs. real API” discrepancies. Karena beroperasi di level network, kode aplikasi Anda tetap unchanged baik saat hitting mock endpoint maupun API real. Ini memastikan bahwa test dan development environment Anda closely mirror perilaku production.

Use Case:

• Development: Develop fitur frontend tanpa menunggu backend API
• Testing: Buat test reliable dan deterministik yang tidak tergantung layanan eksternal
• Edge Case Testing: Simulasikan network failure, slow response, dan kondisi error
• Demo Environment: Sediakan data konsisten dan terkontrol untuk presentasi stakeholder

---

Langkah demi Langkah: Membuat Proyek Mock Server TypeScript

1. Inisialisasi Proyek

mkdir fake-rest
cd fake-rest
npm init -y

2. Instalasi Dependency

npm install express fakerest @faker-js/faker msw date-fns
npm install -D typescript ts-node @types/node @types/express prettier

3. Konfigurasi TypeScript

Buat file tsconfig.json:

{
  "compilerOptions": {
    "module": "nodenext",
    "target": "esnext",
    "types": ["node"],
    "sourceMap": true,
    "declaration": true,
    "declarationMap": true,
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true,
    "strict": true,
    "noImplicitAny": false,
    "jsx": "react-jsx",
    "verbatimModuleSyntax": true,
    "isolatedModules": true,
    "noUncheckedSideEffectImports": true,
    "moduleDetection": "force",
    "skipLibCheck": true
  }
}

---

4. Struktur Proyek

fake-rest/
├── package.json
├── tsconfig.json
├── README.md
├── src/
│   ├── dataGenerator/
│   │   ├── index.ts
│   │   ├── customer.ts
│   │   ├── products.ts
│   │   └── ...
│   ├── fakeServer/
│   │   ├── express.ts
│   │   ├── index.ts
│   │   └── ...
│   ├── server.ts
│   └── demo.ts
└── ...

• dataGenerator/: Fungsi untuk membuat data palsu tiap koleksi (customer, produk, dll.)
• fakeServer/: Kode untuk setup mock server
• server.ts: Entry point untuk menjalankan Express server
• demo.ts: Script demo/test API

---

5. Membuat Data Palsu dengan Faker

Faker adalah library powerful untuk menghasilkan data palsu yang realistis. Library ini menyediakan berbagai jenis data dan locale, membuatnya sempurna untuk membuat mock API yang meyakinkan.

Contoh: src/dataGenerator/customer.ts

import { faker } from "@faker-js/faker";

export function generateCustomers(count: number = 50) {
  return Array.from({ length: count }).map((_, index) => ({
    id: faker.string.uuid(),
    first_name: faker.person.firstName(),
    last_name: faker.person.lastName(),
    email: faker.internet.email(),
    phone: faker.phone.number(),
    address: {
      street: faker.location.streetAddress(),
      city: faker.location.city(),
      country: faker.location.country(),
      zipCode: faker.location.zipCode(),
    },
    company: faker.company.name(),
    job_title: faker.person.jobTitle(),
    avatar: faker.image.avatar(),
    created_at: faker.date.past({ years: 2 }),
    updated_at: faker.date.recent({ days: 30 }),
    is_active: faker.datatype.boolean(0.8), // 80% kemungkinan aktif
    subscription_tier: faker.helpers.arrayElement([
      "free",
      "premium",
      "enterprise",
    ]),
  }));
}

Contoh: src/dataGenerator/products.ts

import { faker } from "@faker-js/faker";

export function generateProducts(count: number = 100) {
  return Array.from({ length: count }).map((_, index) => ({
    id: faker.string.uuid(),
    name: faker.commerce.productName(),
    description: faker.commerce.productDescription(),
    price: parseFloat(faker.commerce.price({ min: 10, max: 1000, dec: 2 })),
    category: faker.commerce.department(),
    brand: faker.company.name(),
    sku: faker.string.alphanumeric(8).toUpperCase(),
    stock: faker.number.int({ min: 0, max: 100 }),
    images: Array.from({ length: faker.number.int({ min: 1, max: 5 }) }).map(
      () => faker.image.url({ width: 800, height: 600 }),
    ),
    rating: faker.number.float({ min: 1, max: 5, fractionDigits: 1 }),
    reviews_count: faker.number.int({ min: 0, max: 500 }),
    tags: faker.helpers.arrayElements(
      ["electronics", "clothing", "books", "home", "sports", "beauty", "toys"],
      { min: 1, max: 3 },
    ),
    is_featured: faker.datatype.boolean(0.2), // 20% kemungkinan featured
    created_at: faker.date.past({ years: 1 }),
    updated_at: faker.date.recent({ days: 7 }),
  }));
}

Gabungkan semua generator di src/dataGenerator/index.ts:

import type { Db } from "./types.js";
import { generateCustomers } from "./customer.js";
import { generateCategories } from "./categories.js";
import { generateProducts } from "./products.js";
import { generateOrders } from "./orders.js";
import { generateInvoices } from "./invoices.js";
import { generateReviews } from "./reviews.js";
import finalize from "./finalize.js";

const generateData = (): Db => {
  console.log("Generating demo data...");
  const db = {} as Db;
  db.customers = generateCustomers();
  db.categories = generateCategories();
  db.products = generateProducts(db);
  db.orders = generateOrders(db);
  db.invoices = generateInvoices(db);
  db.reviews = generateReviews(db);
  finalize(db);
  return db as Db;
};

export default generateData;

---

6. Setup Express Mock Server

Contoh: src/fakeServer/express.ts

import express from "express";
import { SimpleRestServer } from "fakerest";
import generateData from "../dataGenerator";

export default () => {
  const app = express();
  app.use(express.json());
  app.use(express.urlencoded({ extended: true }));

  const data = generateData();
  const restServer = new SimpleRestServer({ data, loggingEnabled: true });

  app.use("/", async (req, res) => {
    // Parse filter, sort, range, embed sebagai JSON jika ada
    const params = { ...req.query };
    ["filter", "sort", "range", "embed"].forEach((key) => {
      if (typeof params[key] === "string") {
        try {
          params[key] = JSON.parse(params[key]);
        } catch {}
      }
    });
    const context = {
      method: req.method,
      url: req.url,
      requestBody: req.body,
      headers: new Headers(),
      params,
    };
    const response = await restServer.handle(context);
    if (response.headers)
      Object.entries(response.headers).forEach(([k, v]) => res.setHeader(k, v));
    res.status(response.status).json(response.body);
  });
  return app;
};

---

7. Menjalankan Server

Contoh: src/server.ts

import createExpressApp from "./fakeServer/express";

const app = createExpressApp();
const PORT = 3000;
app.listen(PORT, () => {
  console.log(`Mock server running at http://localhost:${PORT}`);
});

Jalankan dengan:

npm run start

---

8. Fitur API Lanjutan

• Filtering:

  curl 'http://localhost:3000/customers?filter=%7B%22first_name%22%3A%22Bruce%22%7D'

• Sorting:

  curl 'http://localhost:3000/products?sort=%5B%22price%22%2C%22desc%22%5D'

• Embedding:

  curl 'http://localhost:3000/orders?embed=%5B%22customer%22%5D'

---

9. Mocking API di Browser/Test dengan MSW

Contoh di Browser:

import { setupWorker } from "msw/browser";
import { getMswHandler } from "fakerest";
import generateData from "./dataGenerator";

const handler = getMswHandler({ baseUrl: "/api", data: generateData() });
const worker = setupWorker(handler);
worker.start();

Contoh di Node.js (untuk tes):

import { setupServer } from "msw/node";
import { getMswHandler } from "fakerest";
import generateData from "./dataGenerator";

const handler = getMswHandler({ baseUrl: "/api", data: generateData() });
const server = setupServer(handler);
server.listen();

---

Ringkasan: Kenapa Pendekatan Ini Bagus

• Tanpa backend: Bisa langsung mulai membangun dan menguji.
• Data fleksibel & realistis: Faker menghasilkan data yang bervariasi dan meyakinkan.
• Fitur API powerful: Filtering, sorting, pagination, embedding langsung tersedia.
• Bisa di mana saja: Node.js, browser, dan automated test.
• Mudah dikembangkan: Tambah koleksi/field baru seiring kebutuhan prototipe.

---

Catatan: Kode pada artikel ini diadaptasi dan terinspirasi dari contoh master di repository marmelab.

Repository: github.com/kreasipositif/fake-rest

---

Siap menguasai arsitektur modern? Bergabunglah dengan kursus pengembangan komprehensif kami di Kreasi Positif Indonesia dan pelajari best practices industri dari software engineers berpengalaman.