单测对于核心业务来说必不可少,尤其对于一些稳定的业务,写好单测可以降低回归成本,以免造成线上问题。我们常常对一些 npm 包进行单测,但是你有没有想过如何对 UI 组件进行单测,今天以 Vue 为例给大家分享一下 UI 组件库的测试。
前面我多多少少和大家介绍了 element-ui 这个框架,我也正在逐步吃透它的整体设计,并为我所用,从中也能学到一个优秀的开源框架所具备的「基本素养」。
UI 组件测试,以前做 iOS 的时候,做法是截图,然后把截图与正确 case 的图进行对比,这样做不确定性太大了。但是,在前端 UI 测试相对容易多了。
单测的核心思想是给定一个「确定的结果」,然后执行代码,只要执行结果与给定的结果一致就算通过。比如,定义一个函数 sum:
function sum(a, b) {
return a + b;
}
单测试应该是这样的。输入2、3,期望结果是 5:
export(sum(2, 3)).tobe(5)
UI 单侧的难点是能够让 UI 显示到页面上,一个思路就是使用一个无头浏览器渲染页面(