测试vue-filepond组件时handleUpdateFiles函数Ref调用异常求助

可行方案汇总 #

1. 存根组件并注入模拟实例 #

直接存根vue-filepond组件，在存根的生命周期中把模拟实例绑定到组件元素上，确保ref能捕获到带方法的实例：

import { mount } from '@vue/test-utils'
import ImageUpload from '@/components/ImageUpload.vue'

describe('ImageUpload', () => {
  it('handleUpdateFiles emits upload event correctly', async () => {
    // 模拟FilePond核心方法
    const mockFilePond = {
      getFile: () => ({
        file: new File(['test content'], 'avatar.jpg', { type: 'image/jpeg' })
      }),
      getFileEncodeBase64String: () => Promise.resolve('data:image/jpeg;base64,dGVzdA==')
    }

    const wrapper = mount(ImageUpload, {
      global: {
        stubs: {
          VueFilePond: {
            template: '<div></div>',
            mounted() {
              // 让ref指向模拟实例
              Object.assign(this.$el, mockFilePond)
            }
          }
        }
      }
    })

    await wrapper.vm.handleUpdateFiles()

    // 验证emit触发及参数
    expect(wrapper.emitted('upload')).toBeTruthy()
    expect(wrapper.emitted('upload')[0]).toEqual([
      expect.any(File),
      'data:image/jpeg;base64,dGVzdA=='
    ])
  })
})

2. 挂载后直接赋值ref #

如果存根方式不生效，可在组件挂载后直接给imageUploaderRef.value赋值模拟实例：

import { mount } from '@vue/test-utils'
import ImageUpload from '@/components/ImageUpload.vue'
import { vi } from 'vitest'

describe('ImageUpload', () => {
  it('handleUpdateFiles processes files properly', async () => {
    const testFile = new File(['dummy'], 'test.png', { type: 'image/png' })
    const testBase64 = 'data:image/png;base64,abc123'

    const wrapper = mount(ImageUpload)
    
    // 直接给ref注入模拟方法
    wrapper.vm.imageUploaderRef.value = {
      getFile: vi.fn().mockReturnValue({ file: testFile }),
      getFileEncodeBase64String: vi.fn().mockResolvedValue(testBase64)
    }

    await wrapper.vm.handleUpdateFiles()

    // 验证方法调用和emit参数
    expect(wrapper.vm.imageUploaderRef.value.getFile).toHaveBeenCalled()
    expect(wrapper.emitted('upload')[0]).toEqual([testFile, testBase64])
  })
})

3. 关键注意事项 #

• 必须用await等待getFileEncodeBase64String的异步操作完成，否则断言会提前执行导致失败
• 检查组件中ref的绑定是否正确：确保ref="imageUploaderRef"直接绑定在VueFilePond组件标签上，而非父容器
• 使用vitest的vi.fn()可以更方便地跟踪方法调用次数和参数

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