Vue Test Utils v1.0 升级指南：重大变更与迁移策略-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00575/article/details/148575813

Vue Test Utils v1.0 升级指南：重大变更与迁移策略

vue-test-utils Component Test Utils for Vue 2 项目地址: https://gitcode.com/gh_mirrors/vu/vue-test-utils

前言

Vue Test Utils 作为 Vue.js 官方的单元测试工具库，在经过长时间的 Beta 测试后，终于迎来了 v1.0 正式版。这个版本带来了一些重要的 API 变更，旨在提供更清晰、更符合最佳实践的测试体验。本文将详细解析这些变更，并提供具体的迁移方案。

核心 API 变更解析

1. find 方法的拆分

在 Beta 版本中，find 方法承担了双重职责：

查找 DOM 节点（使用 querySelector 语法）
查找 Vue 组件（通过组件引用、ref 或 name 选项）

这种设计虽然方便，但违反了单一职责原则，容易造成混淆。v1.0 版本将其拆分为两个独立的方法：

find：仅用于查找 DOM 节点

wrapper.find('.button') // 查找类名为 button 的 DOM 元素

findComponent：专门用于查找组件

wrapper.findComponent(FooComponent) // 查找 Foo 组件实例
wrapper.findComponent({ name: 'foo' }) // 通过 name 查找
wrapper.findComponent({ ref: 'my-ref' }) // 通过 ref 查找

2. 移除 isVueInstance 方法

isVueInstance 被移除的主要原因是它鼓励测试实现细节而非行为。良好的测试应该关注组件的外部行为，而不是内部实现。

迁移方案：

// 旧写法
expect(wrapper.isVueInstance()).toBe(true)

// 新写法（仅在确实需要时使用）
expect(wrapper.vm).toBeTruthy()

3. contains 方法的替代方案

contains 方法被更明确的断言方法所取代：

// 旧写法
expect(wrapper.contains('#el')).toBe(true)

// 新写法1（推荐）
wrapper.get('#el') // 如果找不到元素会抛出错误

// 新写法2
expect(wrapper.find('#el').exists()).toBe(true)

4. is 方法的替代方案

检查元素类型的 is 方法可以通过原生 DOM API 替代：

// 旧写法
wrapper.find('div').is('div')

// 新写法
wrapper.find('div').element.tagName === 'DIV'

5. isEmpty 方法的替代方案

判断 DOM 节点是否为空现在推荐使用专门的 DOM 测试库：

// 使用 jest-dom 的扩展匹配器
expect(wrapper.find('.empty').element).toBeEmpty()

测试最佳实践变更

1. 避免测试 name 属性

测试组件的 name 属性通常属于实现细节测试，建议避免。如果确实需要：

// 获取组件名称
wrapper.vm.$options.name

// 获取 DOM 元素标签名
wrapper.element.tagName

2. 弃用 setMethods 和 mountingOptions.methods

直接替换组件方法会导致测试与实现紧密耦合，且违反 Vue 的设计原则。推荐以下替代方案：

场景：避免组件中的 API 调用

// 组件代码
const Foo = {
  methods: {
    async getData() {
      const res = await axios.get('/api/data')
      this.data = res.data
    }
  }
}

// 旧写法（不推荐）
mount(Foo, {
  methods: {
    getData: jest.fn()
  }
})

// 新写法（推荐）
jest.mock('axios') // 使用 Jest 模拟整个模块
axios.get.mockResolvedValue({ data: mockData }) // 设置模拟返回值

其他实用建议

关闭弃用警告：如果暂时无法立即迁移所有测试，可以临时关闭警告
```
import { config } from '@vue/test-utils'
config.showDeprecationWarnings = false
```
渐进式迁移：大型项目可以逐步迁移，不必一次性修改所有测试
关注测试意图：在迁移过程中，重新审视每个测试的真实意图，确保测试的是行为而非实现