umi 配置mock

在根目录下直接新建mock文件夹

在mock文件夹下新增ts文件,导出对应的mock数据,例如

import Mock from 'mockjs'

export default {
  'GET /api/tags': Mock.mock({
    'list|100': [{ name: '@city', 'value|1-100': 50, 'type|0-2': 1 }],
  }),
}

调用mock数据

service({
  url: '/api/tags',
  data: params,
})
umi配置mock 代理proxy配置beseUrl
开启mock 关闭关闭 配置 /
关闭mock

本地

开启代理

将localhost代理到devUrl

关闭 配置 /
关闭开启 配置 devUrl
使用umi配置,{mock:false},然后使用代理或者baseUrl
dev环境开启或关闭,build的时候忽略开启 配置devUrl
优先级:baseUrl > 代理Proxy > mock

如果想使用mock,一定要关闭代理和baseUrl配置!!!

如果不想使用mock,直接开启代理或者baseUrl配置就好了。或者在umi的配置里面关闭mock

UmiJS 中,自定义组件使用 mock 可以帮助你在测试环境中模拟真实 API 调用,以便更好地隔离组件的行为并编写单元测试。以下是一个基本的步骤: 1. **创建 mock 数据文件**:首先,你需要为你的 API 创建一个 mock 数据文件,通常这是一个 JSON、JavaScript 对象或 TypeScript 定义。假设你的 API 接口是获取用户信息,那么 mock 文件可能是这样的: ```json { "code": 0, "message": "成功", "data": { "id": 1, "name": "张三", "email": "zhangsan@example.com" } } ``` 2. **安装 mock 库**:Umi 内置了一些 mock 库的支持,如 axios-mock-adapter,如果是 React 组件,你也可以选择像 Mock.js 或 Sinon.js 这样的库。 3. **配置 mock**:在你的测试配置文件(通常是 `.umi-test.ts` 或者在测试入口文件中),导入并配置 mock。例如,对于 axios-adapter'; import { createaxios } from '@/utils/axios'; configure({ rest: { ...createaxios(), baseURL: 'http://localhost:3000/api', // 假设这是你的 API 地址 }, }); // 然后在需要的地方,你可以使用 createaxios() 来创建一个已经配置mock 的 axios 实例 const axios = createaxios(); ``` 4. **在组件内部使用**:在你的自定义组件中,你可以假设已经有一个返回 mock 数据的 API 方法,然后在适当的地方(如 componentDidMount 或者生命周期钩子)设置这个 mock。 5. **编写测试**:现在你可以在组件的测试文件中,模拟 API 调用并验证组件的响应行为,比如: ```javascript it('should render with mocked user data', async () => { await axios.get('/users/1').mockResolvedValueOnce(mockUserData); //... }); ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值