1.4.4　单元测试组件

确定编写哪些单元测试非常重要。如果为组件的每个属性都编写测试，将会创建出一个低效的、减缓开发速度的测试套件。

能够帮助我们决定如何测试组件的一种方法是使用组件契约的概念。一个组件契约就是一个组件与应用程序其余部分之间的协议。

当你开始一份新工作时，你要和你的雇主签订一份合同。你同意每周工作40小时来换取薪酬。因为你已经在合同中同意工作40小时，所以只要你的雇主支付工资，他们就可以放心地让你每周为他们工作40小时。

同样，当你编写应用程序其余部分所使用的组件时，你就是在为该组件的行为定义一个契约。其他组件可以假设，如果提供了正确的输入，该组件将履行其契约协议并产生约定的输出。

在组件契约中输入和输出非常重要。一个好的组件单元测试应该始终可以触发一个输入，并断言组件产生正确的输出（图1.4）。你应该从开发人员使用组件但又不了解组件具体实现的角度来编写测试。

图1.4　在组件单元测试中触发输入并断言输出

组件常见的输入是用户操作，比如用户单击按钮。最常见的输出是渲染函数生成的DOM节点，但是Vue组件还有许多其他输入和输出。例如，输入可以是：

·组件中的props

·用户操作（如点击按钮）

·Vue事件

·Vuex store中的数据

Vue组件的输出可以是：

·发射出的事件

·外部函数调用

注释　如果你不知道Vuex store中发射（emit）的事件或数据是什么，不要担心。你会在本书的后面学习到相关内容。

假设你有一个AuthorizedStatus组件，它接受一个authorized prop。如果authorized prop为true，它将在<div>元素中渲染“你已被授权”。如果authorized prop为false，则渲染“你未被授权”。

定义　一个prop是传递给组件的一段数据。prop是将数据从父组件传递到子组件的一种方法。你可以在Vue文档中阅读到更多关于prop的内容http://mng.bz/A2Dz。

你可以在例1.10中看到AuthorizedMessage组件。

例1.10　AuthorizedMessage.vue

当你在应用程序中使用此组件时，如果输入的authorized prop为true，则输出应为“你已被授权”。如果输入的authorized prop为false，或者没有输入，则输出为“你未被授权”。这就是该组件的契约，也是应该编写单元测试的功能点。在本书中我将使用组件契约的概念告诉你应该为组件编写哪些测试。

现在你已经对测试有一个宏观认识，并且正踏在成为一名测试大师的道路上。在第2章中，你将创建一个测试脚本并开始编写你的第一个单元测试！

总结

·测试类型有两种：自动化测试和手动测试。

·遵循前端测试金字塔原则，前端测试套件要由单元测试、快照测试和端到端测试组成。

·测试并不总是有好处的。如果测试不能节省时间，编写测试就变得没有意义。

·Vue应用程序由Vue实例组成，这些实例使用模板字符串或渲染函数来描述DOM。

·单文件组件需要被编译成具有渲染函数的对象。

·你可以使用组件契约概念为Vue组件定义单元测试编写内容。