How to Mock APIs in Frontend Development Using MSW and Faker

Mocking, which means simulating backend interfaces and data, is a common practice in frontend development to accelerate integration testing and avoid waiting for real APIs. The article first discusses the motivations for using mock data—saving time during tight integration windows—and the common objections, such as unrealistic data and extra maintenance effort.

It then compares six mainstream mock approaches: code‑intrusive mocks, packet‑capture tools (Fiddler, Charles), local services (json‑server, Express), browser extensions (Requestly), platform solutions (Apifox, YApi), and request‑interception libraries (Mock.js, MSW). Each method is evaluated on five dimensions—simplicity, flexibility, realism, maintainability, and collaboration—and assigned a star rating.

Based on the analysis, the author selects two preferred categories: platform‑type solutions and request‑interception, ultimately choosing the combination of Mock Service Worker (MSW) and Faker for its ability to intercept real network requests and generate realistic fake data.

Technical setup:

npm create vite@latest
cd my-mock-app
npm install
npm install msw @faker-js/faker --save-dev
npm install axios --save

After initializing a Vite Vue 3 TypeScript project, create a src/mocks/handlers.ts file with MSW handlers. Example handler returning a delayed JSON response:

import { rest } from 'msw';
export const handlers = [
  rest.get('/api/user', (req, res, ctx) => {
    return res(
      ctx.status(200),
      ctx.delay(1000),
      ctx.json({ username: 'codexu' })
    );
  }),
];

Configure the Service Worker in src/mocks/browser.js :

import { setupWorker } from 'msw';
import { handlers } from './handlers';
export const worker = setupWorker(...handlers);

Generate the Service Worker script with npx msw init public/ --save , then start the worker conditionally in main.ts during development:

if (import.meta.env.MODE === 'development') {
  const { worker } = await import('./mocks/browser');
  worker.start();
}

To produce realistic data, replace static responses with Faker-generated objects:

import { faker } from '@faker-js/faker/locale/zh_CN';
rest.get('/api/user', (req, res, ctx) => {
  return res(
    ctx.status(200),
    ctx.delay(1000),
    ctx.json(Array.from({ length: 10 }).map(() => ({
      fullname: faker.person.fullName(),
      email: faker.internet.email(),
      avatar: faker.image.avatar(),
      address: faker.location.streetAddress(),
    })))
  );
});

The article also covers advanced MSW features such as handling all HTTP methods, using req.passthrough() for conditional real requests, and response utilities like res.once , ctx.status , ctx.delay , ctx.json , and others for headers, text, XML, and GraphQL.

Finally, it notes that the same handlers can be reused in Node environments for testing with setupServer , and encourages readers to try the MSW + Faker combination for a powerful, type‑safe, and realistic mock workflow.