mocker-api

Mocker API LOGO

Buy me a coffee Build & Deploy Download Repo Dependents Open in unpkg Release npm version

中文 · Quick Start · Usage · Options · Delayed · Example · License · type

mocker-api that creates mocks for REST APIs. It will be helpful when you try to test your application without the actual REST API server.

Features:

🔥 Built in support for hot Mocker file replacement.
🚀 Quickly and easily configure the API via JSON.
🌱 Mock API proxying made simple.
💥 Can be used independently without relying on webpack and webpack-dev-server.

Quick Start

mkdir mocker-app && cd mocker-app

# Create a mocker configuration file based on rules
touch api.js

# Global install dependent.
npm install mocker-api -g

# Default port: 3721
mocker ./api.js

# Designated port
# Run server at localhost:8000
mocker ./api.js --host localhost --port 8000

Installation

you can put it the package.json config as a current project dependency.

npm install mocker-api --save-dev

Usage

mocker-api dev support mock, configured in mocker/index.js.

you can modify the http-proxy options and add the event listeners by adding the httpProxy configuration

const proxy = {
// Priority processing.
// apiMocker(app, path, option)
// This is the option parameter setting for apiMocker
_proxy: {
proxy: {
// Turn a path string such as `/user/:name` into a regular expression.
// https://www.npmjs.com/package/path-to-regexp
'/repos/(.*)': 'https://api.github.com/',
'/:owner/:repo/raw/:ref/(.*)': 'http://127.0.0.1:2018',
'/api/repos/(.*)': 'http://127.0.0.1:3721/'
},
// rewrite target's url path. Object-keys will be used as RegExp to match paths.
// https://github.com/jaywcjlove/mocker-api/issues/62
pathRewrite: {
'^/api/repos/': '/repos/',
},
changeHost: true,
// modify the http-proxy options
httpProxy: {
options: {
ignorePath: true,
},
listeners: {
proxyReq: function (proxyReq, req, res, options) {
console.log('proxyReq');
},
},
},
},
// =====================
// The default GET request.
// https://github.com/jaywcjlove/mocker-api/pull/63
'/api/user': {
id: 1,
username: 'kenny',
sex: 6
},
'GET /api/user': {
id: 1,
username: 'kenny',
sex: 6
},
'GET /api/user/list': [
{
id: 1,
username: 'kenny',
sex: 6
}, {
id: 2,
username: 'kenny',
sex: 6
}
],
'GET /api/:owner/:repo/raw/:ref/(.*)': (req, res) => {
const { owner, repo, ref } = req.params;
// http://localhost:8081/api/admin/webpack-mock-api/raw/master/add/ddd.md
// owner => admin
// repo => webpack-mock-api
// ref => master
// req.params[0] => add/ddd.md
return res.json({
id: 1,
owner, repo, ref,
path: req.params[0]
});
},
'POST /api/login/account': (req, res) => {
const { password, username } = req.body;
if (password === '888888' && username === 'admin') {
return res.json({
status: 'ok',
code: 0,
token: "sdfsdfsdfdsf",
data: {
id: 1,
username: 'kenny',
sex: 6
}
});
} else {
return res.status(403).json({
status: 'error',
code: 403
});
}
},
'DELETE /api/user/:id': (req, res) => {
console.log('---->', req.body)
console.log('---->', req.params.id)
res.send({ status: 'ok', message: '删除成功!' });
}
}
module.exports = proxy;

Options

  • proxy => {} Proxy settings, Turn a path string such as /user/:name into a regular expression.
  • pathRewrite => {} rewrite target's url path. Object-keys will be used as RegExp to match paths. #62
  • withFullUrlPath=false => Boolean the proxy regular expression support full url path. if the proxy regular expression like /test?a=1&b=1 can be matched. #25
  • priority => proxy priority proxy or mocker #151
  • changeHost => Boolean Setting req headers host.
  • httpProxy => {} Set the listen event and configuration of http-proxy
  • bodyParserJSON JSON body parser
  • bodyParserText Text body parser
  • bodyParserRaw Raw body parser
  • bodyParserUrlencoded URL-encoded form body parser
  • bodyParserConf => {} bodyParser settings. eg: bodyParserConf : {'text/plain': 'text','text/html': 'text'} will parsed Content-Type='text/plain' and Content-Type='text/html' with bodyParser.text
  • watchOptions => object Options object as defined chokidar api options
  • header => {} Access Control Allow options.
    {
    header: {
    'Access-Control-Allow-Methods': 'POST, GET, OPTIONS, PUT, DELETE',
    }
    }

⚠️ No wildcard asterisk * - use parameters instead (.*), support v1.7.3+

Delayed Response

You can use functional tool to enhance mock. #17

const delay = require('mocker-api/delay');
const noProxy = process.env.NO_PROXY === 'true';

const proxy = {
'GET /api/user': {
id: 1,
username: 'kenny',
sex: 6
},
// ...
}
module.exports = (noProxy ? {} : delay(proxy, 1000));

apiMocker

apiMocker(app, mockerFilePath[, options])
apiMocker(app, Mocker[, options])

Multi entry mocker file watching

const apiMocker = require('mocker-api');
const mockerFile = ['./mock/index.js'];
// or
// const mockerFile = './mock/index.js';
apiMocker(app, mockerFile, options)

Example

Using With Command

Base example

⚠️ Not dependent on webpack and webpack-dev-server.

# Global install dependent.
npm install mocker-api -g
# Run server
mocker ./mocker/index.js

Or you can put it the package.json config as a current project dependency.

{
"name": "base-example",
"scripts": {
+ "api": "mocker ./mocker"
},
"devDependencies": {
+ "mocker-api": "2.9.5"
},
+ "mocker": {
+ "port": 7788
+ },
"license": "MIT"
}

Using With Express

Express example

To use api mocker on your express projects.

⚠️ Not dependent on webpack and webpack-dev-server.

const express = require('express');
+ const path = require('path');
+ const apiMocker = require('mocker-api');

const app = express();

+ apiMocker(app, path.resolve('./mocker/index.js'))
app.listen(8080);

or

const express = require('express');
+ const apiMocker = require('mocker-api');

const app = express();

+ apiMocker(app, {
+ 'GET /api/user': {
+ id: 1,
+ sex: 0
+ }
+ });

app.listen(8080);

Using With Webpack

webpack example

To use api mocker on your Webpack projects, simply add a setup options to your webpack-dev-server options:

Change your config file to tell the dev server where to look for files: webpack.config.js.

const HtmlWebpackPlugin = require('html-webpack-plugin');
+ const path = require('path');
+ const apiMocker = require('mocker-api');

module.exports = {
entry: {
app: './src/index.js',
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
+ devServer: {
+ ...
+ before(app){
+ apiMocker(app, path.resolve('./mocker/index.js'), {
+ proxy: {
+ '/repos/(.*)': 'https://api.github.com/',
+ '/:owner/:repo/raw/:ref/(.*)': 'http://127.0.0.1:2018'
+ },
+ changeHost: true,
+ })
+ }
+ },
plugins: [
new HtmlWebpackPlugin({
template: path.resolve('./public/index.html'),
title: 'Webpack App Mocker API'
})
],
};

Must have a file suffix! For example: ./mocker/index.js.

Let's add a script to easily run the dev server as well: package.json

{
"name": "development",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
+ "start": "webpack serve --progress --mode development",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "MIT",
"devDependencies": {
"html-webpack-plugin": "4.5.0",
"mocker-api": "2.9.5",
"webpack": "5.22.0",
"webpack-cli": "4.5.0",
"webpack-dev-server": "3.11.2"
}
}

Mock API proxying made simple.

{
before(app){
+ apiMocker(app, path.resolve('./mocker/index.js'), {
+ proxy: {
+ '/repos/(.*)': 'https://api.github.com/',
+ },
+ changeHost: true,
+ })
}
}

Using With create-react-app

create-react-app example

To use api mocker on your create-react-app projects. create src/setupProxy.js and place the following contents in it:

+ const apiMocker = require('mocker-api');
+ const path = require('path');

module.exports = function(app) {
+ apiMocker(app, path.resolve('./mocker/index.js'), {
+ proxy: {
+ '/repos/(.*)': 'https://api.github.com/',
+ },
+ changeHost: true,
+ });
};
{
.....
"devDependencies": {
+ "mocker-api": "2.9.5"
},
....
}

Development

$ yarn install
$ yarn run build
$ yarn run watch
$ yarn run test

Contributors

As always, thanks to our amazing contributors!

Made with github-action-contributors.

License

MIT © Kenny Wong

Generated using TypeDoc