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