Vue Test Utils 使用教程

Vue Test Utils 是 Vue.js 的官方测试工具库，它提供了一些用于测试 Vue 组件的 API 和工具。本教程将介绍 Vue Test Utils 的基本用法。

安装

使用 npm 安装：

npm install --save-dev @vue/test-utils

基本用法

创建 Wrapper
Wrapper 是 Vue Test Utils 的核心对象，它是对 Vue 组件的包装器，它提供了一些方法用于访问和操作组件。
创建 Wrapper 的方法有两种：

• mount: 将组件挂载到 DOM 上，并返回一个 Wrapper 对象。
• shallowMount: 将组件的子组件替换为 stub 组件，只渲染当前组件，并返回一个 Wrapper 对象。

import {
    mount, shallowMount } from '@vue/test-utils'
import MyComponent from './MyComponent.vue'

// 挂载组件并返回 Wrapper 对象
const wrapper = mount(MyComponent)

// 浅渲染组件并返回 Wrapper 对象
const wrapper = shallowMount(MyComponent)

访问和操作组件

Wrapper 提供了一些方法用于访问和操作组件：

• vm: 返回组件实例。
• element: 返回组件的根 DOM 元素。
• find(selector): 返回第一个匹配选择器的子元素的 Wrapper 对象。
• findAll(selector): 返回所有匹配选择器的子元素的 Wrapper 对象数组。
• text(): 返回组件的文本内容。
• setValue(value): 设置表单元素的值。
• trigger(eventType): 触发事件。

// 访问组件实例
wrapper.vm
// 访问组件的根 DOM 元素
wrapper.element
// 查找第一个匹配选择器的子元素
wrapper.find('.foo')
// 查找所有匹配选择器的子元素
wrapper