如何使用Vitest测试Vue组件中的文件拖拽功能？

Vitest和Jest的API高度兼容，你可以借鉴Jest的拖拽测试思路，只需适配Vitest的测试环境即可，具体步骤如下：

1. 模拟测试用的文件与DataTransfer对象 #

拖拽事件依赖DataTransfer对象传递文件，先封装工具函数创建模拟文件和DataTransfer：

// 生成测试用File实例
const createTestFile = (name = 'test.txt', type = 'text/plain') => {
  return new File(['mock content'], name, { type })
}

// 生成包含指定文件的DataTransfer对象
const createDataTransfer = (files) => {
  const dt = new DataTransfer()
  files.forEach(file => dt.items.add(file))
  return dt
}

2. 挂载组件并触发拖拽事件序列 #

拖拽是一系列事件的组合（dragenter→dragover→drop），需要依次触发并阻止默认行为，才能让drop事件正常触发：

import { mount } from '@vue/test-utils'
import FileDrop from '@/components/FileDrop.vue'
import { describe, it, expect, vi } from 'vitest'

describe('FileDrop 组件', () => {
  it('正确处理文件拖拽', async () => {
    // 准备测试文件和DataTransfer
    const testFile = createTestFile('document.pdf', 'application/pdf')
    const dataTransfer = createDataTransfer([testFile])

    // 挂载组件
    const wrapper = mount(FileDrop)
    const dropZone = wrapper.find('.drop-zone')

    // 触发dragenter和dragover，必须阻止默认行为
    await dropZone.trigger('dragenter', {
      dataTransfer,
      preventDefault: vi.fn()
    })
    await dropZone.trigger('dragover', {
      dataTransfer,
      preventDefault: vi.fn()
    })

    // 触发drop事件
    await dropZone.trigger('drop', {
      dataTransfer,
      preventDefault: vi.fn(),
      stopPropagation: vi.fn()
    })

    // 根据组件逻辑编写断言，比如检查是否接收到文件
    expect(wrapper.vm.receivedFiles).toHaveLength(1)
    expect(wrapper.vm.receivedFiles[0].name).toBe('document.pdf')
  })
})

3. 关键注意事项 #

• 必须用vi.fn()模拟preventDefault和stopPropagation，浏览器默认会阻止拖拽行为，不模拟的话drop事件不会被组件捕获
• 如果组件监听的是全局（document/window）拖拽事件，需要调整事件触发的目标，比如直接在wrapper.vm上触发或模拟全局事件
• 可扩展测试场景：多文件拖拽、不同类型文件校验、拖拽取消逻辑等，只需修改createDataTransfer传入的文件列表即可

内容的提问来源于stack exchange，提问作者Alex