vite-plugin-api-mocks

Provide local mocks for vite.

A API mock plugin for vite.

npm i vite-plugin-api-mocks -D
# or
yarn add vite-plugin-api-mocks -D

Example

Run Example

cd ./example

npm install

npm run dev

Usage

Development environment

The development environment is implemented using Connect middleware

• Config plugin in vite.config.ts

import { defineConfig } from 'vite'
import { viteAPIMocks } from 'vite-plugin-api-mocks'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue(),
    viteAPIMocks({
      mockPath: 'mocks',
      timeout: [0, 200]
    })
  ],
})

• viteAPIMocks Options

{
  mockPath?: string
  timeout?: number | [number, number]
  configPath?: string
  ignore?: RegExp | ((fileName: string)=> boolean)
  watchFiles?: boolean
  logger?: boolean
}

Options

mockPath

type: string

default: 'mock'

Set the folder where the mock .ts file is stored

If watchFiles:true, the file changes in the folder will be monitored. And synchronize to the request result in real time

If configPath has a value, it is invalid

timeout

type: number | [number, number]

default: 0

Timeout for all mock the requests. It can be a number or a random range like [0, 200]

ignore

type: RegExp | ((fileName: string) => boolean);

default: undefined

When automatically reading analog .ts files, ignore files in the specified format

watchFiles

type: boolean

default: true

Set whether to monitor changes in mock .ts files

configPath

type: string

default: vite.mock.config.ts

Set the data entry that the mock reads. When the file exists and is located in the project root directory, the file will be read and used first. The configuration file returns an array

logger

type: boolean

default: true

Whether to display the request log on the console

Mock file example

/mocks

// auth.ts
import type { MockMethod } from 'vite-plugin-api-mocks'

const routes: MockMethod[] = [{
  url: '/_mocks/api/login',
  method: 'post',
  response: (ctx) => {
    const { username, password } = ctx.body

    return 'ok'
  },
}, {
  url: '/_mocks/api/:userId',
  method: 'get',
  response: (ctx) => {
    const { userId } = ctx.params

    return {
      id: userId,
      name: 'John'
    }
  },
}, {
  url: '/_mocks/api/test',
  method: 'post',
  rawResponse: async (req, res) => {
    let reqbody = ''
    await new Promise((resolve) => {
      req.on('data', (chunk) => {
        reqbody += chunk
      })
      req.on('end', () => resolve(undefined))
    })
    res.setHeader('Content-Type', 'text/plain')
    res.statusCode = 200
    res.end(`hello, ${reqbody}`)
  },
}]

export default routes

MockMethod

{
  // request url
  url: string;
  // request method
  method?: MethodType;
  // Request time in milliseconds
  timeout?: number | [number, number];
  // default: 200
  statusCode?:number;
  // response data (JSON)
  response?: ((opt: { [key: string]: string; body: Record<string,any>; query:  Record<string,any>, headers: Record<string, any>; }) => any) | any;
  // response (non-JSON)
  rawResponse?: (req: IncomingMessage, res: ServerResponse) => void;
}

License

MIT