Mock的使用

Mock是什么

Mock（模拟）是一种常用的测试手段。Mocking 是在测试过程中，对于某些不容易构造或者不容易获取的对象，用一个虚假的对象来创建以便测试的方法。

你可能有一个函数，它需要从数据库中获取数据。在测试这个函数时，你可能不想真的去连接数据库，因为这会使测试变得复杂并且慢。这时，你可以创建一个 Mock 对象来模拟数据库的行为。你可以预设这个 Mock 对象的行为，让它返回你想要的数据，然后在测试中使用这个 Mock 对象，而不是真正的数据库。

Mockjs官网 https://github.com/nuysoft/Mock/wiki/Getting-Started

Mock安装与配置

安装

pnpm install -D vite-plugin-mock mockjs

配置vite.config.js文件

import { UserConfigExport, ConfigEnv } from 'vite'
import { viteMockServe } from 'vite-plugin-mock'
import vue from '@vitejs/plugin-vue'
export default ({ command })=> {
  return {
    plugins: [
      vue(),
      viteMockServe({  //保证开发期间可以使用访问mock提供的数据
        localEnabled: command === 'serve',
      }),
    ],
  }
}

在整个项目的根路径新建一个mock文件夹，在此文件夹中新建一个用户文件user.ts

Mock模拟数据和接口

//用户信息数据
//createUserList函数执行会返回一个数组，数组里面包含两个用户信息
function createUserList() {
    return [
        {
            userId: 1,
            avatar:
                'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
            username: 'admin',
            password: '111111',
            desc: '平台管理员',
            roles: ['平台管理员'],
            buttons: ['cuser.detail'],
            routes: ['home'],
            token: 'Admin Token',
        },
        {
            userId: 2,
            avatar:
                'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
            username: 'system',
            password: '111111',
            desc: '系统管理员',
            roles: ['系统管理员'],
            buttons: ['cuser.detail', 'cuser.user'],
            routes: ['home'],
            token: 'System Token',
        },
    ]
}

export default [
    // 用户登录接口
    {
        url: '/api/user/login',//请求地址
        method: 'post',//请求方式
        response: ({ body }) => {
            //获取请求体携带过来的用户名与密码
            const { username, password } = body;
            //调用获取用户信息函数,用于判断是否有此用户
            const checkUser = createUserList().find(
                (item) => item.username === username && item.password === password,
            )
            //没有用户返回失败信息
            if (!checkUser) {
                return { code: 201, data: { message: '账号或者密码不正确' } }
            }
            //如果有返回成功信息
            const { token } = checkUser
            return { code: 200, data: { token } }
        },
    },
    //对外暴露一个数组，
    //数组中包含登录假接口
    //还有一个获取用户信息得到假的接口
    {
        url: '/api/user/info',
        method: 'get',
        response: (request) => {
            //获取请求头携带token
            const token = request.headers.token;
            //查看用户信息是否包含有次token用户
            const checkUser = createUserList().find((item) => item.token === token)
            //没有返回失败的信息
            if (!checkUser) {
                return { code: 201, data: { message: '获取用户信息失败' } }
            }
            //如果有返回成功信息
            return { code: 200, data: {checkUser} }
        },
    },
]