跳至内容

入门

欢迎使用 Vue 测试工具,它是 Vue.js 的官方测试工具库!

这是 Vue 测试工具 v2 的文档,它针对 Vue 3。

简而言之

什么是 Vue 测试工具?

Vue 测试工具 (VTU) 是一组旨在简化测试 Vue.js 组件的工具函数。它提供了一些方法来以隔离的方式挂载和交互 Vue 组件。

让我们看一个例子

js
import { mount } from '@vue/test-utils'

// The component to test
const MessageComponent = {
  template: '<p>{{ msg }}</p>',
  props: ['msg']
}

test('displays message', () => {
  const wrapper = mount(MessageComponent, {
    props: {
      msg: 'Hello world'
    }
  })

  // Assert the rendered text of the component
  expect(wrapper.text()).toContain('Hello world')
})

Vue 测试工具通常与测试运行器一起使用。流行的测试运行器包括

  • Vitest。基于终端,具有实验性的浏览器 UI。
  • Cypress。基于浏览器,支持 Vite、webpack。
  • Playwright (实验性)。基于浏览器,支持 Vite。
  • WebdriverIO。基于浏览器,支持 Vite、Webpack,跨浏览器支持。

Vue 测试工具是一个最小且不带意见的库。对于功能更强大、更符合人体工程学和更带意见的工具,您可能需要考虑 Cypress 组件测试,它具有热重载开发环境,或者 测试库,它在进行断言时强调基于可访问性的选择器。这两个工具都在内部使用 Vue 测试工具,并公开相同的 API。

下一步做什么?

要查看 Vue 测试工具的实际应用,请 参加速成课程,我们将在其中使用测试优先的方法构建一个简单的待办事项应用程序。

文档分为两个主要部分

  • 基本,涵盖您在测试 Vue 组件时会遇到的常见用例。
  • 深入 Vue 测试工具,探索库的其他高级功能。

您还可以浏览完整的 API.

或者,如果您更喜欢通过视频学习,这里有 一些讲座