ui组件如何进行单元测试，该测试那些内容呢

Question

在写一个 vue2 的 UI库， 纠结要不要写单元测试，但是又不知道要测试那些东西。。

Answer 1

通用性越高的库或框架，就越必要添加单元测试。

对于一个完整的 UI 库而言，通常应该包含如下内容：

• 代码；

• 文档；

• 示例；

• 自动化测试。

其中，文档与示例用于提供给库的使用者，示例使其能够直观地判断这个库是否能够满足自己的需求，而文档可以指导其在自己的项目中集成并使用该库。

而自动化测试，是提供给 UI 库的开发及维护人员，它能够带来以下好处：

• 降低人工测试的成本；虽然编写及维护测试脚本需要付出额外的成本，但从长远来看，这些成本通常远比采用人工测试要低地多；

• 保证该库在后续的开发维护过程中不会出现意料之外的问题；在修改代码「比如优化、重构、修改或添加新的功能等」后，往往需要重新进行测试，这时人工测试通常无法保证覆盖到每一个测试点，这时就会为项目带来隐患；

• 评估其可用性；一般编写测试的过程就是使用这个库的过程，这时我们可以方便地评估这个库的可用性是否良好；

• 提供稳定可靠的印象；一般情况下，开发人员更偏向于使用提供单元测试的库，这会避免一些不必要的风险。

当然，以上观点只是对于通用性较高的库而言的。

而对于与业务相关的 UI 部分，通常由于其界面变动较为频繁，维护其测试脚本的成本会很高，与其专门招一两个懂得自动化测试的工程师来维护测试脚本，还不如用比较低的工资招聘几个人进行人工测试来的成本低，这时就需要根据项目所需的稳定程度来仔细权衡了。

Answer 2

之前也纠结过是否给单个React组件做单测，后来我的基本原则是：

是否能帮助更早，或更快地找到bug~

只要目的不要偏，不要头重脚轻，写测试的成本比开发的成本还大~

Answer 3

UI库大致可以分为3类：

• 工作中使用（整个系统的基础模块甚至全公司共享的模块）

• 贡献开源社区

• 自己练手

对于自己练手的库，完全不需要，会浪费时间。但如果是学习怎么写这方面的测试，可以写一两个，熟悉流程，做到心中有数，具体操作看下面。

对于以工作中使用和开源社区为目的，只需要单元测试而且是完全必要的。原因如下：

• 虽然单元测试需要花费时间且所花时间会比模块本身更多，但是性价比却是随着使用的次数越来越高

• 在工作中或开源社区中，我们写库的目的都是为了能更好的为别人使用，这个时候单元测试应该是必须的。

• 好的单元测试可以作为优秀的文档，并且保证模块行为的确定性。

• UI库并不设计业务逻辑，所以只写单元测试已经足够

学习怎么测试Vue：

1. 看官方网站怎么写单元测试，https://cn.vuejs.org/v2/guide...

2. 学习已有库的单元测试，如：https://github.com/sagalbot/v...

该测哪些方面：

• 模块应被渲染的DOM树是否正确

• 模块的属性传递是否正确，（属性是方法则是否被正确调用，属性是布尔值或对象则是否被正确传递且达到预期的目的）

• 模块内的各个行为是否正确

• 甚至你还可以测试各个DOM节点是否被应用预期的class，且这些class是不是预期的样式

希望能帮到你

Answer 4

一个简单好用的UI测试工具https://github.com/360hnjd-fe...