No API state should be too difficult to test

Simulate API states that are normally ignored. For example, quickly trigger an error on an endpoint by clicking the 500 button. Then, unclick it to test your retry logic. Similarly, pick a mock variant from the dropdown, say to respond with a 423 (locked account). As another example, click the clock button 🕓 to delay a response so you can test spinners — you’ve seen them in production at the top left, or restart their animation midway.

Dashboard

Besides the dashboard UI, there’s a programmatic API, which is handy for setting up tests.

Demo (Docker)

This will spin up Mockaton with the sample directory included in the repo mounted on the container.

git clone https://github.com/ericfortis/mockaton.git --depth 1
cd mockaton
make docker

Test it:

curl localhost:2020/api/user

Dashboard: localhost:2020/mockaton

Installation more options ↗

npm install -g mockaton

Mockaton is a Node.js app with no dependencies.

Skills

npx skills add ericfortis/mockaton

Basic Usage

mockaton --port 2020  my-mocks-dir

Mockaton will serve the files on the given directory. It's a file-system based router in which filenames can have dynamic parameters and comments. For paraments use square brackets [], and for comments use parentheses (). Comments are handy because this way each route can have different mock file variants. Similarly, each route can have different response status code variants.

Route	Filename	Description
/api/company/123	api/company/[id].GET.200.json	`[id]` is a dynamic parameter.
/media/avatar.png	media/avatar.png	Statics assets don’t need the above extension.
/api/login	api/login(invalid attempt).POST.401.json	Anything within parenthesis is a comment. They are ignored when routing. You can add many comments, `foo(c0)(c1).png`
/api/login	api/login(default).GET.200.json	`(default)` is a special comment. Otherwise, the first mock variant in alphabetical order wins.
/api/login	api/login(locked out user).POST.423.ts	TypeScript or JavaScript mocks are sent as JSON by default.

How to scrape your backend APIs?

There’s a sister Browser Extension that lets you download in bulk all your API responses following Mockaton’s filename convention.

How to create mocks?

Write it to your mocks directory. TypeScript files are sent as JSON by default.

mkdir -p my-mocks-dir/api
echo "export default { name: 'John' }" > my-mocks-dir/api/user.GET.200.ts

Alternatively, there’s a write-mock API.

Example A: JSON

For JSON responses, you can use TypeScript (or JS), and export default an Object, Array, or String.

Route: /api/company/123
Filename: api/company/[id].GET.200.ts

interface Company {
  name: string
}

export default {
  name: 'Acme, Inc.'
} satisfies Company

Example B: Non-JSON

Route: /api/company/123
Filename: api/company/[id].GET.200.xml

<company>
 <name>Acme, Inc.</name>
</company>

Example C: Function Mocks

With a function mock you can do pretty much anything you could do with a normal backend handler. For example, you can handle complex logic, URL parsing, saving to a database, etc.

Route: /api/company/abc/user/999
Filename: api/company/[companyId]/user/[userId].GET.200.ts

import { IncomingMessage, OutgoingMessage } from 'node:http'
import { parseSegments } from 'mockaton'

export default async function (req: IncomingMessage, response: OutgoingMessage) {
  const { companyId, userId } = parseSegments(req.url, import.meta.filename)
  const foo = await getFoo()
  return JSON.stringify({
    foo,
    companyId,
    userId,
    name: 'Acme, Inc.'
  })
}