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

mocker-api creates mocks for REST APIs. It is helpful when you need 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

1mkdir mocker-app && cd mocker-app
2
3# Create a mocker configuration file based on rules
4touch api.js
5
6# Global install dependent.
7npm install mocker-api -g
8
9# Default port: 3721
10mocker ./api.js
11
12# Designated port
13# Run server at localhost:8000
14mocker ./api.js --host localhost --port 8000

Installation

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

1npm 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

1const proxy = {
2  // Priority processing.
3  // apiMocker(app, path, option)
4  // This is the option parameter setting for apiMocker
5  _proxy: {
6    proxy: {
7      // Turn a path string such as `/user/:name` into a regular expression.
8      // https://www.npmjs.com/package/path-to-regexp
9      '/repos/*path': 'https://api.github.com/',
10      '/:owner/:repo/raw/:ref/*path': 'http://127.0.0.1:2018',
11      '/api/repos/*path': 'http://127.0.0.1:3721/'
12    },
13    // rewrite target's url path. Object-keys will be used as RegExp to match paths.
14    // https://github.com/jaywcjlove/mocker-api/issues/62
15    pathRewrite: {
16      '^/api/repos/': '/repos/',
17    },
18    changeHost: true,
19    // modify the http-proxy options
20    httpProxy: {
21      options: {
22        ignorePath: true,
23      },
24      listeners: {
25        proxyReq: function (proxyReq, req, res, options) {
26          console.log('proxyReq');
27        },
28      },
29    },    
30  },
31  // =====================
32  // The default GET request.
33  // https://github.com/jaywcjlove/mocker-api/pull/63
34  '/api/user': {
35    id: 1,
36    username: 'kenny',
37    sex: 6
38  },
39  'GET /api/user': {
40    id: 1,
41    username: 'kenny',
42    sex: 6
43  },
44  'GET /api/user/list': [
45    {
46      id: 1,
47      username: 'kenny',
48      sex: 6
49    }, {
50      id: 2,
51      username: 'kenny',
52      sex: 6
53    }
54  ],
55  'GET /api/:owner/:repo/raw/:ref/*path': (req, res) => {
56    const { owner, repo, ref } = req.params;
57    // http://localhost:8081/api/admin/webpack-mock-api/raw/master/add/ddd.md
58    // owner => admin
59    // repo => webpack-mock-api
60    // ref => master
61    // req.params.path => add/ddd.md
62    return res.json({
63      id: 1,
64      owner, repo, ref,
65      path: req.params.path
66    });
67  },
68  'POST /api/login/account': (req, res) => {
69    const { password, username } = req.body;
70    if (password === '888888' && username === 'admin') {
71      return res.json({
72        status: 'ok',
73        code: 0,
74        token: "sdfsdfsdfdsf",
75        data: {
76          id: 1,
77          username: 'kenny',
78          sex: 6
79        }
80      });
81    } else {
82      return res.status(403).json({
83        status: 'error',
84        code: 403
85      });
86    }
87  },
88  'DELETE /api/user/:id': (req, res) => {
89    console.log('---->', req.body)
90    console.log('---->', req.params.id)
91    res.send({ status: 'ok', message: '删除成功！' });
92  }
93}
94module.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.

  1{
  2  header: {
  3    'Access-Control-Allow-Methods': 'POST, GET, OPTIONS, PUT, DELETE',
  4  }
  5}

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

⚠️ No wildcard asterisk (.*) - use parameters instead *path, support v3.0.0+

Delayed Response

You can use functional tool to enhance mock. #17

1const delay = require('mocker-api/delay');
2const noProxy = process.env.NO_PROXY === 'true';
3
4const proxy = {
5  'GET /api/user': {
6    id: 1,
7    username: 'kenny',
8    sex: 6
9  },
10  // ...
11}
12module.exports = (noProxy ? {} : delay(proxy, 1000));

apiMocker

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

Multi entry mocker file watching

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

Example

Using With Command

Base example

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

1# Global install dependent.
2npm install mocker-api -g
3# Run server
4mocker ./mocker/index.js

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

1{
2  "name": "base-example",
3  "scripts": {
4+    "api": "mocker ./mocker"
5  },
6  "devDependencies": {
7+    "mocker-api": "2.9.5"
8  },
9+  "mocker": {
10+    "port": 7788
11+  },
12  "license": "MIT"
13}

Using With Express

Express example

To use api mocker on your express projects.

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

1const express = require('express');
2+ const path = require('path');
3+ const apiMocker = require('mocker-api');
4
5const app = express();
6
7+ apiMocker(app, path.resolve('./mocker/index.js'))
8app.listen(8080);

or

1const express = require('express');
2+ const apiMocker = require('mocker-api');
3
4const app = express();
5
6+ apiMocker(app, {
7+   'GET /api/user': {
8+     id: 1,
9+     sex: 0
10+   }
11+ });
12
13app.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.

1const HtmlWebpackPlugin = require('html-webpack-plugin');
2+ const path = require('path');
3+ const apiMocker = require('mocker-api');
4
5module.exports = {
6  entry: {
7    app: './src/index.js',
8  },
9  output: {
10    filename: '[name].bundle.js',
11    path: path.resolve(__dirname, 'dist')
12  },
13+ devServer: {
14+   ...
15+   before(app){
16+     apiMocker(app, path.resolve('./mocker/index.js'), {
17+       proxy: {
18+         '/repos/*path': 'https://api.github.com/',
19+         '/:owner/:repo/raw/:ref/*path': 'http://127.0.0.1:2018'
20+       },
21+       changeHost: true,
22+     })
23+   }
24+ },
25  plugins: [
26    new HtmlWebpackPlugin({
27      template: path.resolve('./public/index.html'),
28      title: 'Webpack App Mocker API'
29    })
30  ],
31};

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

1{
2  "name": "development",
3  "version": "1.0.0",
4  "description": "",
5  "main": "webpack.config.js",
6  "scripts": {
7    "test": "echo \"Error: no test specified\" && exit 1",
8+    "start": "webpack serve --progress --mode development",
9    "build": "webpack --mode production"
10  },
11  "keywords": [],
12  "author": "",
13  "license": "MIT",
14  "devDependencies": {
15    "html-webpack-plugin": "4.5.0",
16    "mocker-api": "2.9.5",
17    "webpack": "5.22.0",
18    "webpack-cli": "4.5.0",
19    "webpack-dev-server": "3.11.2"
20  }
21}

Mock API proxying made simple.

1{
2  before(app){
3+   apiMocker(app, path.resolve('./mocker/index.js'), {
4+     proxy: {
5+       '/repos/*path': 'https://api.github.com/',
6+     },
7+     changeHost: true,
8+   })
9  }
10}

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:

1+ const apiMocker = require('mocker-api');
2+ const path = require('path');
3
4module.exports = function(app) {
5+  apiMocker(app, path.resolve('./mocker/index.js'), {
6+    proxy: {
7+      '/repos/*path': 'https://api.github.com/',
8+    },
9+    changeHost: true,
10+  });
11};

1{
2  .....
3  "devDependencies": {
4+    "mocker-api": "2.9.5"
5  },
6  ....
7}

Development

1$ yarn install
2$ yarn run build
3$ yarn run watch
4$ yarn run test

Contributors

As always, thanks to our amazing contributors!

Made with github-action-contributors.

License

MIT © Kenny Wong