Vuetify

商店

企业版

单元测试是开发应用程序的一个重要(有时被忽略)部分。它们有助于我们的开发流程,确保我们项目的最关键部分不受开发过程中意外错误或疏忽的影响。因此,Vue有自己的测试程序 vue-test-utils。它提供了与 Vue 组件交互的功能,并与许多流行的测试框架一起使用。

关于如何使用 Vue CLI 设置测试运行程序的信息可以在 官方文档 中找到。一目了然,Vue CLI 为以下测试运行程序提供了入门资源库。

为了正确使用 Typescript,Vuetify 组件继承了 Vue 对象。这可能 导致问题 。我们必须在单元测试设置文件中全局安装 Vuetify,而不是使用 localVue instance。这在测试运行程序之间可能有所不同。请务必参考有关安装文件的适当文档。

在 Vuetify 中创建类似于 vuexvue-router 的单元测试,因为您将在localVue 实例中使用 Vuetify 对象,并将实例传递给 mount 函数。

让我们创建一个在应用程序中的测试用例示例。

在上面的例子中,我们创建了一个自定义组件 title prop 和 v-btn,当单击它时,它触发一个自定义事件。现在,我们想要创建测试以确保该行为正常工作,并且在将来的更改中也能这样运行。下面的示例是使用 Jest 测试环境创建的。

在编写测试时,您经常会发现自己在重复同样的事情。在这种情况下,创建助手函数来减少每个测试的重复。DRYing

在单元测试中编写的最常见的重复代码之一是 mount 函数。这可以很容易地编写为可重用函数。

Vuetify 的许多组件都使用全局 $vuetify 对象来生成默认文本或断点信息等设置。在测试这些组件时,需要使用一个模拟对象来提供 vue-test-utils

请记住,你 只需要存根 正在使用的服务。例如 langapplication。除此之外你也可以手动导入这些服务。

所有可用服务的完整列表如下:

Vuetify 将 data-* 属性从组件传递给相关的 HTML 元素,这使得 E2E 测试框架能够轻松地定位它们。

例如,Cypress 建议添加 data-cy 属性,以便更容易地定位元素。

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!