vite-plugin-mock-server

Provide local mocks for Vite.

A mock server plugin for Vite, developed based on TypeScript. And support using TypeScript and JavaScript to write Mock API. When the Mock API file is modified, it will be hot updated automatically. Support and compatibility with express.js middlewares.

Install

node version: >=12.0.0

vite version: >=2.0.0

1# if using npm
2npm i vite-plugin-mock-server -D
3# if using yarn
4yarn add vite-plugin-mock-server -D

Run example

1cd ./example
2npm install
3npm run dev

Usage

• Config plugin in vite.config.ts, compatible with express.js middlewares.

1import { defineConfig } from 'vite'
2import vue from '@vitejs/plugin-vue'
3import bodyParser from 'body-parser'
4import cookieParser from 'cookie-parser'
5import mockServer from 'vite-plugin-mock-server'
6
7export default defineConfig({
8  plugins: [
9    vue(),
10    mockServer({
11      logLevel: 'info',
12      middlewares: [
13        cookieParser(),
14        bodyParser.json(),
15        bodyParser.urlencoded(),
16        bodyParser.text(),
17        bodyParser.raw()
18      ]
19    })
20  ]
21})

• Or just use it with the default parameters, place your mocks in the folder "mock" with name that prefix *.mock.ts or *mock.js, The default api to mock is '/api/'

1import { defineConfig } from 'vite'
2import vue from '@vitejs/plugin-vue'
3import mockServer from 'vite-plugin-mock-server'
4
5export default defineConfig({
6  plugins: [
7    vue(),
8    mockServer())
9  ]
10})

Module exports

• MockOptions

mockModules Ignore manual configuration, it will be filled in automatically.

1export type MockOptions = {
2  logLevel?: 'info' | 'error' | 'off'
3  urlPrefixes?: string[]
4  mockJsSuffix?: string
5  mockTsSuffix?: string
6  mockRootDir?: string
7  mockModules?: string[]
8  noHandlerResponse404?: boolean
9  middlewares?: MockLayer[]
10  printStartupLog?: boolean
11}
12
13// default options
14const options: MockOptions = {
15  logLevel: 'info',
16  urlPrefixes: [ '/api/' ],
17  mockRootDir: './mock',
18  mockJsSuffix: '.mock.js',
19  mockTsSuffix: '.mock.ts',
20  noHandlerResponse404: true,
21  mockModules: [],
22  middlewares: [],
23  printStartupLog: true
24}

• Request

1type Request = Connect.IncomingMessage & { 
2  body?: any, 
3  params?: { [key: string]: string }, 
4  query?: { [key: string]: string },
5  cookies?: { [key: string]: string },
6  session?: any
7}

• MockFunction

1export type MockFunction = {
2  (
3    req: Request, 
4    res: http.ServerResponse, 
5    /** @deprecated in 2.0, use req.params **/
6    urlVars?: { [key: string]: string }
7  ): void
8}

• MockHandler

1export type MockHandler = {
2  pattern: string,
3  method?: string,
4  handle: MockFunction
5}

• MockLayer

1export type MockLayer = (
2    req: Request,
3    res: http.ServerResponse,
4    next: Connect.NextFunction
5) => void;

Mock file examples

The pattern is an ant-style path pattern string, use @howiefh/ant-path-matcher to match the pattern and request URL.

1// example/mock/es.mock.ts
2
3import { MockHandler } from '../../src'
4
5const mocks: MockHandler[] = [
6  {
7    pattern: '/api/test1/1',
8    handle: (req, res) => {
9      res.end('Hello world!' + req.url)
10    }
11  },
12  {
13    pattern: '/api/test1/*',
14    handle: (req, res) => {
15      res.end('Hello world!' + req.url)
16    }
17  },
18  {
19    pattern: '/api/test1/users/{userId}',
20    handle: (req, res) => {
21      const data = {
22        url: req.url,
23        params: req.params,
24        query: req.query,
25        body: req.body
26      }
27      res.setHeader('Content-Type', 'application/json')
28      res.end(JSON.stringify(data))
29    }
30  },
31  {
32    pattern: '/api/test1/body/json',
33    method: 'POST',
34    handle: (req, res) => {
35      res.setHeader('Content-Type', 'application/json')
36
37      //req is incomingMessage which extends stream.Readable 
38      // --> https://nodejs.org/api/stream.html#readablereadsize
39      // res.end need to be within the function
40      // there is a size limit for the bodyString to get parsed 
41      req.on('data', (bodyString: string) => { 
42        let body: object = JSON.parse(bodyString)
43        res.end(JSON.stringify(body))
44      })
45    }
46  },
47]
48
49export default mocks
50
51// example/mock/apis/es2.mock.ts
52
53import { MockHandler } from 'vite-plugin-mock-server'
54
55export default (): MockHandler[] => [
56  {
57    pattern: '/api/test2/1',
58    handle: (req, res) => {
59      res.end('Hello world!' + req.url)
60    }
61  },
62  {
63    pattern: '/api/test2/2',
64    handle: (req, res) => {
65      res.statusCode = 203
66      res.end('Hello world!' + req.url)
67    }
68  }
69]

1// example/mock/cjs.mock.js
2
3module.exports = [
4  {
5    pattern: '/api/merchant1',
6    method: 'GET',
7    handle: (req, res) => {
8      res.end('merchant1:' + req.url)
9    }
10  },
11  {
12    pattern: '/api/merchant2',
13    method: 'GET',
14    handle: (req, res) => {
15      res.end('merchant2:' + req.url)
16    }
17  },
18  {
19    pattern: '/api/merchant2',
20    method: 'GET',
21    handle: (req, res) => {
22      res.end('merchant3:' + req.url)
23    }
24  }
25]
26
27// example/mock/apis/cjs2.mock.js
28
29module.exports = [
30  {
31    pattern: '/api/hello1',
32    method: 'GET',
33    handle: (req, res) => {
34      res.end('hello1:' + req.url)
35    }
36  },
37  {
38    pattern: '/api/hello2',
39    method: 'GET',
40    handle: (req, res) => {
41      res.end('hello2:' + req.url)
42    }
43  },
44  {
45    pattern: '/api/hello3',
46    method: 'GET',
47    handle: (req, res) => {
48      res.end('hello2:' + req.url)
49    }
50  }
51]

License

MIT