单元测试是开发应用程序的一个重要（有时被忽略）部分。它们有助于我们的开发流程，确保我们项目的最关键部分不受开发过程中意外错误或疏忽的影响。因此，Vue有自己的测试程序 vue-test-utils。它提供了与 Vue 组件交互的功能，并与许多流行的测试框架一起使用。
关于如何使用 Vue CLI 设置测试运行程序的信息可以在 官方文档 中找到。一目了然，Vue CLI 为以下测试运行程序提供了入门资源库。
为了正确使用 Typescript，Vuetify 组件继承了 Vue 对象。这可能 导致问题 。我们必须在单元测试设置文件中全局安装 Vuetify，而不是使用 localVue instance。这在测试运行程序之间可能有所不同。请务必参考有关安装文件的适当文档。
如果您没有使用 setup.js 文件，则应在测试的程序部分中添加 Vue.use(Vuetify) 。
在 Vuetify 中创建类似于 vuex 和 vue-router 的单元测试，因为您将在localVue 实例中使用 Vuetify 对象，并将实例传递给 mount 函数。
让我们创建一个在应用程序中的测试用例示例。
在上面的例子中，我们创建了一个自定义组件 title prop 和 v-btn，当单击它时，它触发一个自定义事件。现在，我们想要创建测试以确保该行为正常工作，并且在将来的更改中也能这样运行。下面的示例是使用 Jest 测试环境创建的。
如果你遇到有关测试或者一般问题并且需要帮助，请访问我们的 在线社区。
在编写测试时，您经常会发现自己在重复同样的事情。在这种情况下，创建助手函数来减少每个测试的重复。DRYing
在单元测试中编写的最常见的重复代码之一是 mount 函数。这可以很容易地编写为可重用函数。
Vuetify 的许多组件都使用全局 $vuetify 对象来生成默认文本或断点信息等设置。在测试这些组件时，需要使用一个模拟对象来提供 vue-test-utils。
请记住，你 只需要存根 正在使用的服务。例如 lang 或application。除此之外你也可以手动导入这些服务。
所有可用服务的完整列表如下：
Vuetify 将 data-* 属性从组件传递给相关的 HTML 元素，这使得 E2E 测试框架能够轻松地定位它们。
例如，Cypress 建议添加 data-cy 属性，以便更容易地定位元素。
想要了解更多？继续阅读：