UI 组件如何进行自动化测试

单测对于核心业务来说必不可少，尤其对于一些稳定的业务，写好单测可以降低回归成本，以免造成线上问题。我们常常对一些 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 显示到页面上，一个思路就是使用一个无头浏览器渲染页面（