如何用Vue Test Utils和Vitest测试组件的文件上传与emit功能？

你遇到的错误是因为浏览器安全限制：type="file"的input元素不允许通过JavaScript直接设置value为文件对象，只能将其设为空字符串。要模拟真实的用户文件上传行为，得用DataTransfer对象来实现。

修正后的测试代码如下：

describe('UploadFilesComponent', () => {
  it('能接收用户上传的文件并emit到父组件', () => {
    const wrapper = mount(UploadFilesComponent)
    
    // 模拟测试用的文件
    const testFile = new File(['dummy content'], 'test-file.txt', { type: 'text/plain' });
    
    // 创建DataTransfer对象，模拟用户选择文件的操作
    const dataTransfer = new DataTransfer();
    dataTransfer.items.add(testFile);
    
    // 获取文件输入框，设置其files属性
    const fileInput = wrapper.get('input[type="file"]');
    fileInput.element.files = dataTransfer.files;
    
    // 触发change事件，模拟用户选择文件后的行为
    fileInput.trigger('change');
    
    // 验证组件是否正确emit了事件
    expect(wrapper.emitted()).toHaveProperty('fileEmit');
    
    // 可选：验证emit的文件内容是否正确
    const emittedFile = wrapper.emitted('fileEmit')[0][0];
    expect(emittedFile.name).toBe('test-file.txt');
    expect(emittedFile.type).toBe('text/plain');
  })
})

关键说明： #

• 使用DataTransfer对象模拟浏览器的文件选择流程，这是符合浏览器安全规则的标准做法
• 直接给input的files属性赋值，而非value属性
• 触发change事件后，组件会读取input的files并触发对应的emit逻辑
• 可额外验证emit的文件属性，确保组件对文件的处理符合预期

内容的提问来源于stack exchange，提问作者Martin Müsli