mocker-api

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.

⚠️ webpack-api-mocker => mocker-api

Rename mocker-api

webpack-api-mocker has become powerful and can be used independently of webpack. This is new name mocker-api. webpack-api-mocker can still be used, New content will be posted on mocker-api.

• Using with command
• Using with express
• Using with webpack
• Load data example

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# Run server
9mocker ./api.js

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      '/repos/(.*)': 'https://api.github.com/',
8      '/:owner/:repo/raw/:ref/(.*)': 'http://127.0.0.1:2018'
9    },
10    changeHost: true,
11    // modify the http-proxy options
12    httpProxy: {
13      options: {
14        ignorePath: true,
15      },
16      listeners: {
17        proxyReq: function (proxyReq, req, res, options) {
18          console.log('proxyReq');
19        },
20      },
21    },    
22  },
23  // =====================
24  'GET /api/user': {
25    id: 1,
26    username: 'kenny',
27    sex: 6
28  },
29  'GET /api/user/list': [
30    {
31      id: 1,
32      username: 'kenny',
33      sex: 6
34    }, {
35      id: 2,
36      username: 'kenny',
37      sex: 6
38    }
39  ],
40  'GET /api/:owner/:repo/raw/:ref/(.*)': (req, res) => {
41    const { owner, repo, ref } = req.params;
42    // http://localhost:8081/api/admin/webpack-mock-api/raw/master/add/ddd.md
43    // owner => admin
44    // repo => webpack-mock-api
45    // ref => master
46    // req.params[0] => add/ddd.md
47    return res.json({
48      id: 1,
49      owner, repo, ref,
50      path: req.params[0]
51    });
52  },
53  'POST /api/login/account': (req, res) => {
54    const { password, username } = req.body;
55    if (password === '888888' && username === 'admin') {
56      return res.json({
57        status: 'ok',
58        code: 0,
59        token: "sdfsdfsdfdsf",
60        data: {
61          id: 1,
62          username: 'kenny',
63          sex: 6
64        }
65      });
66    } else {
67      return res.status(403).json({
68        status: 'error',
69        code: 403
70      });
71    }
72  },
73  'DELETE /api/user/:id': (req, res) => {
74    console.log('---->', req.body)
75    console.log('---->', req.params.id)
76    res.send({ status: 'ok', message: '删除成功！' });
77  }
78}
79module.exports = proxy;

Options

• proxy => {} Proxy settings.
• changeHost => {} 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

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

Delayed Responsev

You can use functional tool to enhance mock. #17

1const delay = require('mocker-api/utils/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, mocker[,proxy])

Multi entry mocker file watching

1const mockerFile = ['./mock/index.js'];
2// or
3// const mockerFile = './mock/index.js';
4apiMocker(app, mockerFile, proxy)

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": "^1.6.4"
8  },
9  "license": "MIT"
10}

Using With Express

Express example

⚠️ 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);

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    print: './src/print.js'
9  },
10  devtool: 'inline-source-map',
11+ devServer: {
12+   ...
13+   before(app){
14+     apiMocker(app, path.resolve('./mocker/index.js'), {
15+       proxy: {
16+         '/repos/*': 'https://api.github.com/',
17+         '/:owner/:repo/raw/:ref/*': 'http://127.0.0.1:2018'
18+       },
19+       changeHost: true,
20+     })
21+   }
22+ },
23  plugins: [
24    new HtmlWebpackPlugin({
25      title: 'Development'
26    })
27  ],
28  output: {
29    filename: '[name].bundle.js',
30    path: require.resolve(__dirname, 'dist')
31  }
32};

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-dev-server --open",
9      "build": "webpack"
10    },
11    "keywords": [],
12    "author": "",
13    "license": "MIT",
14    "devDependencies": {
15      ....
16    }
17  }

Mock API proxying made simple.

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

License

MIT © Kenny Wong