https://github.com/lawvs/mocat
🐈 Mocat is a mocking toolbar that allows you to interactively develop and test network requests.
https://github.com/lawvs/mocat
mock mock-server mocking-framework testing-library testing-tools web-development
Last synced: about 1 year ago
JSON representation
🐈 Mocat is a mocking toolbar that allows you to interactively develop and test network requests.
- Host: GitHub
- URL: https://github.com/lawvs/mocat
- Owner: lawvs
- License: mit
- Created: 2019-06-05T17:22:47.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2025-03-08T18:29:42.000Z (about 1 year ago)
- Last Synced: 2025-03-18T05:09:40.112Z (about 1 year ago)
- Topics: mock, mock-server, mocking-framework, testing-library, testing-tools, web-development
- Language: TypeScript
- Homepage: https://lawvs.github.io/mocat/#/user/login
- Size: 3.49 MB
- Stars: 29
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Mocat
[](https://www.npmjs.com/package/mocat)
Mocat is a development toolbar for mocking. It allows you to interactively develop and test network requests. This library is inspired by [cypress](https://github.com/cypress-io/cypress).
## Installation
To install and save in your package.json dev dependencies, run:
```sh
# With npm
npm install --save-dev mocat
# Or with yarn
yarn add --dev mocat
# Or with pnpm
pnpm add --save-dev mocat
```
## Usage
```ts
// 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:
```ts
// main.ts
import { App } from './App'
// Load React
ReactDOM.render(, document.getElementById('app'))
// Or Vue
createApp(App).mount('#app')
if (process.env.NODE_ENV !== 'production') {
await import('./mock')
}
```
## API
### MockRoute
```ts
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[]
}
```
### NetworkScenario
```ts
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
/**
* Serve a static string/JSON object as the response body.
*/
response?: ConstructorParameters[0] | Record
error?: any
}
```
## Other similar projects
- [Mock](https://github.com/nuysoft/Mock)
- [data-mocks](https://github.com/ovotech/data-mocks)
- [xhr-mock](https://github.com/jameslnewell/xhr-mock)
- [fetch-mock](https://github.com/wheresrhys/fetch-mock)
- [cypress](https://github.com/cypress-io/cypress)
- [nise](https://github.com/sinonjs/nise)
## License
[MIT](LICENSE)