Vue Test Utils 源码解析：生命周期、事件模拟，测试不再抓瞎！
大家好！我是你们今天的Vue测试老司机，很高兴能和大家一起聊聊Vue Test Utils (VTU) 里的那些“魔法”，特别是关于如何模拟组件的生命周期和事件，让我们的单元测试不再变成“玄学”。
很多小伙伴在写Vue组件单元测试的时候，经常会遇到这样的困境：
- 组件依赖生命周期钩子做初始化，测试跑起来一片红，提示各种未定义。
- 想模拟用户点击按钮，触发某个方法，结果怎么都触发不了，事件监听压根没生效。
别慌！这些问题VTU都能帮你解决。今天我们就一起扒开它的源码，看看它到底是怎么实现的。
VTU 的“伪装术”：模拟组件生命周期
Vue组件的生命周期是它运行的灵魂，从 beforeCreate 到 destroyed，每个阶段都有特定的作用。但测试的时候，我们不可能真的让组件经历完整的生命周期，因为那样太耗时，也难以控制。 VTU的解决办法是：模拟！
VTU并没有真的去执行Vue的内部生命周期钩子，而是提供了一些方法，让我们可以在测试中“手动”调用这些钩子。
1. mount 和 shallowMount： “假装”组件已创建
mount 和 shallowMount 可以说是单元测试的基石。它们的作用是创建Vue组件的实例，并将其挂载到DOM上（当然，这个DOM可以是虚拟的，不需要真实渲染）。
mount 会渲染组件的所有子组件，而 shallowMount 只会渲染组件本身，子组件会被替换成占位符。
这两个方法背后做了很多事情，但从生命周期角度来看，它们至少模拟了 beforeCreate, created, beforeMount, mounted 这几个阶段。
代码示例：
import { mount } from '@vue/test-utils'
import MyComponent from './MyComponent.vue'
describe('MyComponent', () => {
it('should call created hook', () => {
const createdSpy = jest.spyOn(MyComponent, 'created') // 监视 created 钩子
const wrapper = mount(MyComponent)
expect(createdSpy).toHaveBeenCalled() // 断言 created 钩子被调用
createdSpy.mockRestore() // 清理监视
})
})源码剖析 (简化版)：
虽然VTU的源码比较复杂，但我们可以大致理解一下 mount 的实现思路：
- 创建Vue实例： 使用
new Vue(component)创建组件的实例。 - 挂载到DOM： 创建一个虚拟DOM元素，并将组件实例挂载到这个元素上。
- 触发生命周期钩子： Vue内部会自动触发
beforeCreate,created,beforeMount,mounted等钩子。
2. wrapper.unmount()： “假装”组件已销毁
组件销毁的时候，会触发 beforeDestroy 和 destroyed 钩子。在测试中，我们可以使用 wrapper.unmount() 方法来模拟组件的销毁。
代码示例：
import { mount } from '@vue/test-utils'
import MyComponent from './MyComponent.vue'
describe('MyComponent', () => {
it('should call destroyed hook', () => {
const destroyedSpy = jest.spyOn(MyComponent, 'destroyed') // 监视 destroyed 钩子
const wrapper = mount(MyComponent)
wrapper.unmount()
expect(destroyedSpy).toHaveBeenCalled() // 断言 destroyed 钩子被调用
destroyedSpy.mockRestore() // 清理监视
})
})源码剖析 (简化版)：
wrapper.unmount() 的主要作用是：
- 触发
beforeDestroy钩子： 调用组件实例的beforeDestroy方法。 - 销毁组件实例： 调用组件实例的
$destroy方法，触发destroyed钩子，并从DOM中移除组件。
3. wrapper.setProps()： “假装”组件Props更新
当组件的props发生变化时，会触发 beforeUpdate 和 updated 钩子。我们可以使用 wrapper.setProps() 方法来模拟props的更新。
代码示例：
import { mount } from '@vue/test-utils'
import MyComponent from './MyComponent.vue'
describe('MyComponent', () => {
it('should call updated hook when props change', async () => {
const updatedSpy = jest.spyOn(MyComponent, 'updated') // 监视 updated 钩子
const wrapper = mount(MyComponent, {
props: {
msg: 'Hello'
}
})
await wrapper.setProps({ msg: 'World' }) // 模拟 props 更新
expect(updatedSpy).toHaveBeenCalled() // 断言 updated 钩子被调用
updatedSpy.mockRestore() // 清理监视
})
})注意: setProps 是一个异步方法，因此需要使用 await 等待props更新完成。
源码剖析 (简化版)：
wrapper.setProps() 的主要作用是：
- 更新组件的props： 使用
Vue.set或Vue.delete更新组件实例的propsData。 - 触发
beforeUpdate钩子： 如果props发生变化，Vue内部会自动触发beforeUpdate钩子。 - 更新DOM： Vue内部会对DOM进行diff和更新。
- 触发
updated钩子： DOM更新完成后，Vue内部会自动触发updated钩子。
总结：
| 方法 | 模拟的生命周期钩子 |
|---|---|
mount |
beforeCreate, created, beforeMount, mounted |
shallowMount |
beforeCreate, created, beforeMount, mounted (子组件只渲染占位符) |
wrapper.unmount() |
beforeDestroy, destroyed |
wrapper.setProps() |
beforeUpdate, updated (在props更新时触发) |
VTU 的 “演员”：模拟组件事件
光有生命周期还不够，组件还需要和用户交互，这就涉及到事件。VTU提供了强大的事件模拟功能，让我们可以在测试中模拟各种用户行为。
1. wrapper.find()： 找到目标元素
在模拟事件之前，我们首先要找到要触发事件的DOM元素。 VTU提供了 wrapper.find() 方法，可以根据CSS选择器查找元素。
代码示例：
import { mount } from '@vue/test-utils'
import MyComponent from './MyComponent.vue'
describe('MyComponent', () => {
it('should emit event when button is clicked', async () => {
const wrapper = mount(MyComponent)
const button = wrapper.find('button') // 找到 button 元素
// ...
})
})源码剖析 (简化版)：
wrapper.find() 内部使用了 document.querySelector 或类似的方法，根据CSS选择器在组件的DOM树中查找元素。
2. wrapper.trigger()： 触发事件
找到目标元素之后，我们就可以使用 wrapper.trigger() 方法来触发事件了。
代码示例：
import { mount } from '@vue/test-utils'
import MyComponent from './MyComponent.vue'
describe('MyComponent', () => {
it('should emit event when button is clicked', async () => {
const wrapper = mount(MyComponent)
const button = wrapper.find('button') // 找到 button 元素
await button.trigger('click') // 触发 click 事件
// ...
})
})源码剖析 (简化版)：
wrapper.trigger() 的实现比较复杂，它会根据事件类型创建不同的事件对象，并使用 dispatchEvent 方法将事件分发到目标元素上。
注意:
trigger默认是异步的, 所以需要使用await等待事件处理完成。trigger可以接受第二个参数，用于传递事件的详细信息，例如鼠标位置、键盘按键等。
3. wrapper.emitted()： 检查事件是否被触发
触发事件之后，我们需要验证事件是否被正确地触发，以及传递的参数是否正确。 VTU提供了 wrapper.emitted() 方法来检查组件是否触发了某个事件。
代码示例：
import { mount } from '@vue/test-utils'
import MyComponent from './MyComponent.vue'
describe('MyComponent', () => {
it('should emit event when button is clicked', async () => {
const wrapper = mount(MyComponent)
const button = wrapper.find('button') // 找到 button 元素
await button.trigger('click') // 触发 click 事件
expect(wrapper.emitted('my-event')).toBeTruthy() // 检查 'my-event' 事件是否被触发
expect(wrapper.emitted('my-event')[0]).toEqual(['expected payload']) // 检查 'my-event' 事件传递的参数
})
})源码剖析 (简化版)：
wrapper.emitted() 内部维护了一个事件记录器，用于记录组件触发的所有事件。 当我们调用 wrapper.emitted('my-event') 时，它会从事件记录器中查找名为 my-event 的事件，并返回一个数组，数组中的每个元素都是一个事件参数列表。
4. wrapper.setValue() 和 wrapper.setChecked()： 模拟表单输入
对于表单元素，例如 input 和 textarea，我们需要模拟用户的输入。 VTU提供了 wrapper.setValue() 和 wrapper.setChecked() 方法来设置表单元素的值。
代码示例：
import { mount } from '@vue/test-utils'
import MyComponent from './MyComponent.vue'
describe('MyComponent', () => {
it('should update input value', async () => {
const wrapper = mount(MyComponent)
const input = wrapper.find('input')
await input.setValue('Hello World') // 设置 input 元素的值
expect(input.element.value).toBe('Hello World') // 检查 input 元素的值
})
it('should check checkbox', async () => {
const wrapper = mount(MyComponent)
const checkbox = wrapper.find('input[type="checkbox"]')
await checkbox.setChecked() // 设置 checkbox 元素为选中状态
expect(checkbox.element.checked).toBe(true) // 检查 checkbox 元素是否被选中
})
})源码剖析 (简化版)：
wrapper.setValue() 和 wrapper.setChecked() 会直接修改表单元素的 value 和 checked 属性，并触发相应的事件，例如 input 和 change 事件。
总结：
| 方法 | 作用 |
|---|---|
wrapper.find() |
根据CSS选择器查找DOM元素 |
wrapper.trigger() |
触发DOM元素的事件 |
wrapper.emitted() |
检查组件是否触发了某个事件，并获取事件的参数 |
wrapper.setValue() |
设置表单元素的值，并触发相应的事件 |
wrapper.setChecked() |
设置复选框或单选框的选中状态，并触发相应的事件 |
最佳实践和常见问题
- 使用
jest.spyOn()监视生命周期钩子： 可以更精确地验证生命周期钩子是否被调用，以及被调用的次数。 - 使用
await等待异步操作完成：setProps和trigger等方法都是异步的，需要使用await等待操作完成，否则可能会导致断言失败。 - 避免过度模拟： 单元测试的目的是验证组件的逻辑，而不是模拟所有可能的场景。 尽量减少模拟的范围，只模拟必要的依赖项。
- 注意事件冒泡：
trigger方法会触发事件的冒泡，如果需要阻止事件冒泡，可以使用event.stopPropagation()方法。 - 使用
shallowMount提高测试速度： 如果组件的子组件比较复杂，可以使用shallowMount来提高测试速度。
总结
今天我们一起深入了解了Vue Test Utils是如何模拟组件的生命周期和事件的。 掌握这些技巧，你就可以编写更健壮、更可靠的单元测试，让你的Vue组件在各种场景下都能正常工作。
希望今天的分享对大家有所帮助！ 如果还有什么疑问，欢迎随时提问。 祝大家测试愉快！