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.findAll('.foo')
// 获取组件的文本内容
wrapper.text()
// 设置表单元素的值
wrapper.find('input').setValue('foo')
// 触发事件
wrapper.find('button').trigger('click')

断言

Vue Test Utils 集成了 Jest 断言库，可以方便地进行断言。

// 判断组件是否存在
expect(wrapper.exists()).toBe(true)
// 判断组件是否可见
expect(wrapper.isVisible()).toBe(true)
// 判断组件是否包含指定的子元素
expect(wrapper.contains('.foo')).toBe(true)
// 判断组件是否包含指定的文本
expect(wrapper.text()).toContain('foo')

生命周期钩子

Wrapper 提供了一些方法用于模拟生命周期钩子：

• created()
• beforeMount()
• mounted()
• beforeUpdate()
• updated()
• beforeDestroy()
• destroyed()

// 模拟生命周期钩子
wrapper.vm.$options.created()
wrapper.vm.$options.beforeMount()
wrapper.vm.$options.mounted()
wrapper.vm.$options.beforeUpdate()
wrapper.vm.$options.updated()
wrapper.vm.$options.beforeDestroy()
wrapper.vm.$options.destroyed()

异步测试

Vue.js 组件通常会涉及异步操作，如异步获取数据和异步更新 DOM。Vue Test Utils 提供了一些方法用于处理异步测试：

• nextTick(): 用于等待 DOM 更新完成。
• flushPromises(): 用于等待所有 Promise 对象完成。

// 等待 DOM 更新完成
await wrapper.vm.$nextTick()
// 等待所有 Promise 对象完成
await flushPromises()

示例

下面是一个简单的示例：

<!-- MyComponent.vue -->
<template>
  <div>
    <input v-model="message">
    <button @click="sendMessage">Send</button>
    <ul>
      <li v-for="msg in messages" :key="msg">{{ msg }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
      messages: []
    }
  },
  methods: {
    sendMessage() {
      this.messages.push(this.message)
      this.message = ''
    }
  }
}
</script>

总结

Vue Test Utils 提供了丰富的 API 和工具，可以方便地对 Vue 组件进行测试。学习 Vue Test Utils 的基本用法，有助于提高 Vue 组件的质量和可靠性。