我造了个前端 Mock 工具

2022年05月12日 阅读数:18
这篇文章主要向大家介绍我造了个前端 Mock 工具,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

闲着没事造了个浏览器插件解决前端 Mock 问题。前端

官网地址 https://just-mock.vercel.app/git

前端的痛苦

某一天 leader 问我们 xxx 需求进度咋样了?github

后端: 接口完成,就差前端联调了数据库

前端:你。。。我。。。(哔~~)segmentfault

次日 前端加班加点联调好了,想自测下不一样接口数据的前端表现后端

前端: 后端大大,哪一个帐号下数据比较多,我想测试下分页;哪条数据能触发表单,我想测试下表单,我还想测试下弱网环境。。。api

后端:数据不太好造,等测试同窗吧浏览器

前端:我。。。app

第三天 QA介入测试工具

QA:FE bug 太多,严重阻塞测试工做

前端:我。。。

故事是假的,事是真的。前端确实面临一些问题: 接口定义是否提早约定、缺乏 mock 联调测试效率极低

Mock 的意义

Mock 对于前端的意义: 造数。
不会数据库、业务长链路,造数对于前端来讲有难度。

常见的 Mock 方案

方式一: 硬核 mock , 直接改代码逻辑。 If (true) {} 。 优势:简单。缺点:容易遗忘,形成线上 bug

方式二:Mock 平台相似 https://github.com/YMFE/yapi ,优势:不入侵代码,简单。缺点:依赖后端搭服务、或者购买第三方**

方式三:Apifox 本地安装应用,功能大而全。

另外一种尝试 Just Mock

Just Mock 是一个专门面向 Web 项目的 Mock 工具。你可使用 Just Mock 来模拟后端响应(用于先后端联调、QA 测试、PM 验收、线上问题还原等场景),仅需安装浏览器插件便可知足 90% 的 Mock 须要。

插件下载

插件使用

官网地址

https://just-mock.vercel.app/

欢迎使用反馈