入门

¥Getting Started

欢迎使用 Vue Test Utils，Vue.js 的官方测试工具库！

¥Welcome to Vue Test Utils, the official testing utility library for Vue.js!

这是 Vue Test Utils v2 的文档，它针对的是 Vue 3。

¥This is the documentation for Vue Test Utils v2, which targets Vue 3.

简而言之：

¥In short:

Vue 测试工具 1 瞄准 Vue 2。
¥Vue Test Utils 1 targets Vue 2.
Vue 测试工具 2 瞄准 Vue 3。
¥Vue Test Utils 2 targets Vue 3.

什么是 Vue 测试工具？

¥What is Vue Test Utils?

Vue Test Utils (VTU) 是一组实用函数，旨在简化 Vue.js 组件的测试。它提供了一些以隔离方式挂载 Vue 组件并与之交互的方法。

¥Vue Test Utils (VTU) is a set of utility functions aimed to simplify testing Vue.js components. It provides some methods to mount and interact with Vue components in an isolated manner.

让我们看一个例子：

¥Let's see an example:

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 Test Utils 通常与测试运行器一起使用。受欢迎的测试运行程序包括：

¥Vue Test Utils is commonly used with a test runner. Popular test runners include:

Vitest。基于终端，具有实验性浏览器 UI。
¥Vitest. Terminal based, has experimental browser UI.
Cypress。基于浏览器，支持 Vite、webpack。
¥Cypress. Browser based, supports Vite, webpack.
Playwright（实验）。基于浏览器，支持 Vite。
¥Playwright (experimental). Browser based, supports Vite.
WebdriverIO。基于浏览器，支持 Vite、Webpack，跨浏览器支持。
¥WebdriverIO. Browser based, supports Vite, Webpack, cross browser support.

Vue Test Utils 是一个最小且不固定的库。对于功能更丰富、符合人机工程学和有态度的东西，你可能需要考虑具有热重载开发环境的赛普拉斯组件测试，或者在进行断言时强调基于可访问性的选择器的测试库。这两个工具都在底层使用 Vue Test Utils 并公开相同的 API。

¥Vue Test Utils is a minimal and unopinionated library. For something more featureful, ergonomic and opinionated you may want to consider Cypress Component Testing which has a hot reload development environment, or Testing Library which emphasizes accessibility based selectors when making assertions. Both of these tools use Vue Test Utils under the hood and expose the same API.

接下来是什么？

¥What Next?

要查看 Vue Test Utils 的实际应用，参加速成课程，我们使用测试优先的方法构建了一个简单的 Todo 应用。

¥To see Vue Test Utils in action, take the Crash Course, where we build a simple Todo app using a test-first approach.

文档分为两个主要部分：

¥Docs are split into two main sections:

要点，涵盖测试 Vue 组件时会遇到的常见用例。
¥Essentials, to cover common use cases you'll face when testing Vue components.
深入了解 Vue Test Utils，探索该库的其他高级功能。
¥Vue Test Utils in Depth, to explore other advanced features of the library.

你还可以探索完整的 API 手册。

¥You can also explore the full API.

或者，如果你喜欢通过视频学习，可以选择这里有许多讲座。

¥Alternatively, if you prefer to learn via video, there is a number of lectures available here.

入门 ​

什么是 Vue 测试工具？ ​

接下来是什么？ ​

入门

什么是 Vue 测试工具？

接下来是什么？