mock测试就是在测试过程中,对于某些不容易构造或者不容易获取的对象,用一个虚拟的对象来创建以便测试的测试方法。比如后端接口未完成时,前端可以借助mock完成开发
支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。 通过随机数据,模拟各种场景。
这篇文章所提及的语法很少,其余的可以查看mock.js的 示例 和 文档
我是用的是easy-mock
尽量不要使用easy-mock, 提供的api非常不稳定, 官网也经常挂
注册后就可以新建项目,不过他新建项目的位置有点诡异,不知道前端怎么想的,
两边留白这么多然后按钮在最右下角?
![](https://img.haomeiwen.com/i9022064/0f7c4ff6bc8bbf1f.png)
然后就开始新建接口,注意层级
![](https://img.haomeiwen.com/i9022064/8c8926ab81d6e7cb.png)
数据模板中的每个属性由 3 部分构成:属性名、生成规则、属性值:
// 属性名 name
// 生成规则 rule
// 属性值 value
'name|rule': value 属性名 和 生成规则 之间用竖线 |
分隔。
生成规则 是可选的。
"status": 200,
"list|1-3": [{ // 随机生成1到3个数组元素
'name': '@cname', // 中文名称
'id|+1': 88, // 属性值自动加 1,初始值为88
'age|0-99': 0, // 0至99以内随机整数, 0用来确定类型
'date': '@date("yyyy-MM-dd")', // 日期
'color': '@color', // 16进制颜色
'isFalse|1': true, // 值为 true 的概率是 1/2,值为 false 的概率同样是 1/2。
'isTrue|1-4': true, // 随机生成一个布尔值,值为 true 的概率是 1/(1+4),值为 !value 的概率是 4/(1+4)。
'fromObj|2': obj, // 从obj对象中随机获取2个属性
'fromObj2|1-3': obj, // 从obj对象中随机获取1至3个属性
'brother|1': ['jack', 'jim'], // 随机选取 1 个元素
'sister|+1': ['jack', 'jim', 'lily'], // 每次从数组中顺序选取元素作为结果
'friends|count': ['jack', 'jim']
//通过重复属性值数组生成一个新数组,重复次数为 count。
'name': function // 执行函数function,取其返回值作为最终的属性值,函数的上下文为属性 'name' 所在的对象。
复制代码
正则表达式
'name': regexp // 根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串。
Mock.mock({
'regexp1': /[a-z][A-Z][0-9]/,
'regexp2': /\w\W\s\S\d\D/,
'regexp3': /\d{5,10}/
})
// =>
{
"regexp1": "pJ7",
"regexp2": "F)\fp1G",
"regexp3": "561659409"
}
复制代码
占位符
占位符 只是在属性值字符串中占个位置,并不出现在最终的属性值中。
占位符 的格式为:
@占位符
@占位符(参数 [, 参数])
复制代码
注意:
用 @ 来标识其后的字符串是 占位符。
占位符 引用的是 Mock.Random 中的方法。
通过 Mock.Random.extend() 来扩展自定义占位符。
占位符 也可以引用 数据模板 中的属性。
占位符 会优先引用 数据模板 中的属性。
占位符 支持 相对路径 和 绝对路径。
Mock.Random
Mock.Random 是一个工具类,用于生成各种随机数据。
Mock.Random 的方法在数据模板中称为『占位符』,书写格式为 @占位符(参数 [, 参数]) 。
var Random = Mock.Random
Random.email()
// => "n.clark@miller.io"
Mock.mock('@email')
// => "y.lee@lewis.org"
Mock.mock( { email: '@email' } )
// => { email: "v.lewis@hall.gov" }
复制代码
方法
Mock.Random 提供的完整方法(占位符)如下:
![](https://img.haomeiwen.com/i9022064/a74531491a6303a8.png)
响应式数据
数据编辑器 中,为某个属性指定一个 Function。在 Function 中,我们提供了 _req 对象,这使得我们可以通过请求对象编写逻辑,实现响应式数据
Function 参数说明
![](https://img.haomeiwen.com/i9022064/79d8463b0406ab8b.png)
我所以用到的语法:
"name": "@cname", // 返回一个中文名字
"id|10000-100000": 1, // 返回一个id,值在10000到100000之间
'url|1': [
'https://s2.ax1x.com/2019/09/05/.jpg',
'https: //s2.ax1x.com/2019/09/05/.jpg',
'https: //s2.ax1x.com/2019/09/05/.jpg',
],
// 从数组中随机一个值
"shopTitle|+1": [
"天猫",
"京东",
"胖弟弟"
]
// 依次给我一个value
'name': function({_req,Mock}) {
let obj = _req.query
if (obj['keyword']) {
return obj['keyword'] + Mock.Random.csentence()
} else {
return Mock.Random.csentence()
}
}
}],
// 匹配查询字符串中的 keyword,然后返回该 keyword+一句话
网友评论