Refer create-json-server-with-multiple-files
一、工具
先介绍下需要用到的工具包:
josn-server 30秒内快速搭建零配置的 rest API 假数据服务器,供需要快速后端原型编写与模拟的前端开发人员使用。
faker.js 一个可以生成大量假数据的工具。比如生成名字,金额, 地址等
二、没有使用上述工具时简单的 Mock做法
通常情况下,前端同学做 mock 测试最简便的方法可能是这样
step1
在对应目录下编写一个mock.js
文件,内容如下:
export default{
users:[
{
name: 'John Wang',
age: 12,
...
},
// 手写更多一看就很假的数据 :)
...
]
}
step2
在需要使用的地方直接引入mock.js
, 如下:
import mockUsers from "./mock";
const userList = mockUsers
...
在 step1 如果真用手动编写的方式造一个假数据,比如一个列表可能有50行数据,需要费劲脑汁去造50个不同用户的数据,产出比太差。
这里可以使用Faker.js
来生成,相应修改代码如下:
mock.js
const faker = require('faker')
const generateUsers = () =>{
let users = []
for (let index = 0; index < 200; index++) {
let id = faker.random.uuid()
let name = faker.name.findName()
let age = faker.random.number({max:100, min:18})
let gender = Math.random()>0.5?'female':'male'
...
users.push({
id,
name,
age,
gender,
...
})
}
return {users}
}
module.exports = generateUsers
引用
import generateUsers from "./mock";
const userList =generateUsers()
...
通过上边的脚本可以生成非常逼真的数据。
问题
上面这种数据模拟测试方法有个问题即无法模拟request
请求,也即你的 ajax
相关代码无法测试。此时可以引入 Json-Server 做一个简单的http服务器,这样请求也可以做到有响应,可测试。
当Json-server
中有多个接口mock
时, pagination
功能需注意:
- json-server 的翻页接口只能返回数组,不可以在数组同级加别的属性,如总数之类, 否则数据会一次性全展示,无翻页效果
-
filter
必须是 完全匹配,不支持模糊查询, 且测试数据必须是已知的,不可以用faker.js
查询,否则查不到。 -
sort
同上 -
json-server
的数据不能是faker.js
动态生成的,只能是生成好,复制过来用。
结论: json-server 完全模拟翻页还是有点问题,达不到100%的真实模拟。而faker.js在造假数据上真的是无与伦比的强,非常省事。
refer: