Skip to content

Mock

Zova provides an out-of-the-box Mock mechanism based on vite-plugin-fake-server, which can also support development environment and production environment

Basic Usage

Just provide the mock files in the mock directory of the module

For example, the module home-layout needs to get the menu through the API: /home/layout/menu/select, then you can directly provide the corresponding mock file in home-layout as follows:

src/suite/a-home/modules/home-layout/mock/menu.fake.ts

typescript
import { defineFakeRoute } from '@zhennann/vite-plugin-fake-server/client';

export default defineFakeRoute([
  {
    url: '/home/layout/menu/select',
    method: 'get',
    response: () => {
      return {
        code: 0,
        message: 'Success',
        data: [],
      };
    },
  },
]);
  • The mock file extension is .fake.ts
  • The defineFakeRoute method is used to support type auto-completion

Configuration

Mock can be configured through .env file

env/.env

txt
MOCK_ENABLED = true
MOCK_LOGGER = false
MOCK_BASE_NAME = $API_PREFIX
MOCK_BUILD = false
MOCK_BUILD_PORT = 8888
MOCK_BUILD_OUTPUT = distMockServer
MOCK_BUILD_CORS = true
NameDescription
MOCK_ENABLEDWhether to enable mock
MOCK_LOGGERWhether to enable logger
MOCK_BASE_NAMEURL prefix, default is /api
MOCK_BUILDWhether to generate an independently deployable fake server
MOCK_BUILD_PORTThe port of fake server
MOCK_BUILD_OUTPUTThe output directory of fake server
MOCK_BUILD_CORSWhether to enable cors

Production environment

By default, the production environment does not generate the fake server. If want fake server to be generated during building, just turn on MOCK_BUILD as well

bash
$ npm run build
  • The generated fake server is automatically output to the directory specified by MOCK_BUILD_OUTPUT
  • For the principle of fake server, see: vite-plugin-fake-server

Released under the MIT License.