单元测试 Vue 3
讲师：Vue Msatery Team
口袋资源独家Vue Mastery付费课程，独家中英文字幕，配套资料齐全！
用不到1/10的价格，即可享受同样的高品质课程，且可以完全拥有，随时随地都可以任意观看和分享。
测试什么
您是否曾经在您的应用程序中部署过一项新功能并祈祷您不要醒来得知您不小心引入了一个全新的错误？通过测试您的应用程序，您可以大大减少这些顾虑，并增强您的 Vue 应用程序。
一个经过全面测试的应用程序通常由多种测试的良好实施组合组成，包括端到端 (E2E) 测试，有时还包括集成测试、快照测试和单元测试。本课程专门作为初学者在 Vue 中进行单元测试的指南。正如您将在整个课程中看到的那样，单元测试是经过良好测试的应用程序的基础。
在本课程中，我们将使用流行的Jest JavaScript 测试库以及Vue 的官方单元测试实用程序库Vue Test Utils来运行我们的测试。
编写测试的目标
在下一课中，我们将编写第一个测试。但首先，让我们清楚地了解测试应用程序的好处。我们希望从编写更多代码来测试代码的所有这些额外工作中获得什么？
增强信心
除了在部署新功能后晚上睡得更好之外，测试还有助于让团队中的每个人都达成一致。如果您是存储库的新手，看到一套测试就像让一位经验丰富的开发人员坐在您旁边并观看您的代码，确保您保持在代码应该执行的正确通道内。通过这些测试，您可以确信在添加新功能或更改现有代码时不会破坏任何东西。
质量守则
当您在编写组件时考虑到测试，您最终会创建孤立的、可重用性更高的组件。如果您开始为您的组件编写测试并且您发现它们不容易测试，这是一个明显的迹象，表明您可能可以重构您的组件，这最终可以改进它们。
更好的文档
正如第一点所提到的，测试的另一个结果是它最终可以为您的开发团队生成良好的文档。当某人是代码库的新手时，他们可以从测试中寻求指导，这可以提供有关组件应该如何工作的意图的见解，并为可能被测试的边缘情况提供线索。
确定要测试的内容
所以我们知道测试很有价值，但是我们到底应该在我们的应用程序中测试什么？很容易走极端并测试不需要的东西，这会不必要地减慢开发时间。那么我们在 Vue.js 应用程序中测试什么？答案其实很简单：组件。由于 Vue 应用程序只是互锁组件的拼图，我们需要测试它们的个体行为以确保它们正常工作。
组件契约
当我自己第一次学习 Vue 单元测试时，我发现当 Ed Yerburgh（他确实写了关于测试 Vue.js 应用程序的书）谈到通过组件契约进行思考时很有帮助。就此而言，我们指的是组件与应用程序其余部分之间的协议。
例如，假设一个组件接受 amin和maxprop 并在这些 prop 值之间生成一个随机数，并将其呈现给 DOM。组件合约说：我将接受两个道具并使用它们产生一个随机数。本合同内在的是输入和输出的概念。该组件同意接收min和maxprops 作为输入，并提供一个随机数作为输出。因此，我们可以开始通过思考组件契约并识别输入和输出来挑选我们应该测试的内容。
在高层次上，常见的输入和输出如下：
输入
- 组件数据
- 组件道具
- 用户交互
- 例如：用户点击一个按钮
- 生命周期方法
mounted(),created(), 等等
- Vuex 商店
- 路由参数
产出
- 渲染到 DOM 的内容
- 外部函数调用
- 组件发出的事件
- 路线变更
- Vuex 商店的更新
- 与孩子的联系
- 即子组件的变化
通过专门关注这些，您可以避免关注内部业务逻辑。换句话说，我们不应该因为担心每一行代码的工作方式而陷入困境。这似乎违反直觉，但单元测试的目标纯粹是为了确保您的组件产生预期的结果。我们在这里不关心它是如何得出这个结果的。我们甚至可能会在以后改变逻辑上得出该结果的方式，因此我们不希望我们的测试不必要地规定应该如何实现。由您的团队找出实现该结果的最有效途径。那不是测试的工作。就单元测试而言，如果它有效，它就有效。
现在我们知道我们应该测试什么，让我们看几个基本示例并确定我们可以在每个示例中测试什么。
示例：AppHeader 组件
loggedIn在此示例中，我们有一个组件，如果属性为，它将显示注销按钮true。
