Mocat is a development toolbar for mocking. It allows you to interactively develop and test network requests. This library is inspired by cypress.
To install and save in your package.json dev dependencies, run:
# With npm
npm install --save-dev mocat
# Or with yarn
yarn add --dev mocat
# Or with pnpm
pnpm add --save-dev mocat
// mock.ts
import { create } from 'mocat'
const app = create()
app.mockRoute({
name: 'login api',
// Specify the URL to match
url: '/api/login',
// Create scenarios
scenarios: [
{
name: 'login success',
response: {
username: 'Alice',
msg: 'ok',
},
},
{
name: 'login fail',
desc: 'username or password incorrect',
// The HTTP status code to send.
status: 400,
// HTTP headers to accompany the response.
headers: { 'Content-Type': 'application/json' },
// Serve a static string/JSON object as the response body.
response: {
msg: 'username or password incorrect',
},
},
],
})
Then load it from the application entry:
// main.ts
import { App } from './App'
// Load React
ReactDOM.render(<App />, document.getElementById('app'))
// Or Vue
createApp(App).mount('#app')
if (process.env.NODE_ENV !== 'production') {
await import('./mock')
}
export interface MockRoute {
/**
* The name of API.
*/
name?: string
desc?: string
/**
* Match against the full request URL.
* If a string is passed, it will be used as a substring match,
* not an equality match.
*/
url: string | RegExp | ((url: string) => boolean)
/**
* Match against the request's HTTP method.
* All methods are matched by default.
*/
method?:
| 'GET'
| 'POST'
| 'OPTIONS'
| 'PUT'
| 'DELETE'
| 'HEAD'
| 'TRACE'
| 'CONNECT'
scenarios?: NetworkScenario[]
}
export interface NetworkScenario {
/**
* The name of scenario.
*/
name: string
/**
* The description of scenario.
*/
desc?: string
/**
* The HTTP status code to send.
* @default 200
*/
status?: number
/**
* HTTP headers to accompany the response.
* @default {}
*/
headers?: Record<string, string>
/**
* Serve a static string/JSON object as the response body.
*/
response?: ConstructorParameters<typeof Response>[0] | Record<string, any>
error?: any
}