Stop Hardcoding Mocks! Meet PocketMock: The Browser-Native Visual Mocking Tool

#webdev #javascript #programming #web

The Problem: "API Not Ready Yet"

We've all been there. You're building a frontend feature, the UI is ready, but the backend API is... well, "coming soon."

Usually, you have three choices:

Hardcode data: Write const fakeData = [...] inside your component. (And pray you remember to delete it later).
Heavy Proxy Setup: Configure tools like Charles or Fiddler. Powerful, but a pain to set up for every HTTPS endpoint.
Headless Mocks: Use tools like MSW or Mirage. They are amazing for tests, but for rapid prototyping, they lack a visual interface to quickly toggle error states or modify data on the fly.

I wanted something in between. I wanted a tool that lives in the browser, requires zero config, and lets me visually manage my network requests.

So, I built PocketMock.

🛠️ What is PocketMock?

PocketMock is a lightweight, zero-intrusion mocking tool. Unlike traditional proxy servers, it monkey-patches window.fetch and XMLHttpRequest directly in your browser tab.

It injects a small, Shadow DOM-isolated widget into your page (bottom-right corner). From there, you can intercept requests, modify responses, and simulate network conditions without leaving your app.

✨ Key Features

1. Smart Data Generation 🧠

Stop typing {"name": "John Doe"} manually. PocketMock supports smart syntax to generate realistic data instantly:

{
  "users|5": {
    "id": "@guid",
    "name": "@name",
    "avatar": "@image(100x100)",
    "email": "@email",
    "status": "@pick(active,offline)"
  }
}

2. Dynamic Logic (Function Mocks) ⚡

Need to test authentication logic? You can write actual JavaScript functions instead of static JSON:

(req) => {
  const { username } = JSON.parse(req.body);

  if (username === 'admin') {
    return { token: 'mock-jwt-token', role: 'admin' };
  }

  return { 
    status: 401, 
    body: { error: 'Invalid credentials' } 
  };
}

3. Chaos Engineering (Simulate Errors) 🐢

Test how your app handles slow networks or server crashes with one click:

Delay: Add a 2000ms delay to any endpoint.
Status: Force a 500 or 404 error to test your Error Boundaries.

4. Team Collaboration (Vite Plugin) 🤝

By default, rules are saved in LocalStorage. But if you use the Vite Plugin, rules are synced to your file system (mock/ folder). Commit them to Git, and your whole team shares the same mock data!

🚀 Quick Start

It takes less than 1 minute to set up.

1. Install

npm install pocket-mocker -D

2. Initialize (Entry File)
In your main.ts or index.js:

import { pocketMock } from 'pocket-mocker';

// Only run in development
if (process.env.NODE_ENV === 'development') {
  pocketMock();
}

That's it! You'll see the widget appear.

🧙‍♂️ How it works under the hood

PocketMock uses a technique called Monkey Patching. It wraps the native window.fetch and XMLHttpRequest.prototype.open/send methods.

When your app makes a request, PocketMock intercepts it.
It checks if the URL matches any active rule.
If matched: It returns a synthetic response (after the configured delay).
If not matched: It passes the request through to the real network, but logs the result in its "Network Monitor" panel, allowing you to "Mock it" with one click later.

The UI is built with Svelte and encapsulated in a Shadow DOM, ensuring it never conflicts with your app's CSS (Tailwind, Bootstrap, etc.).