How to test input file with Jest and vue/test-utils

If you're just wanting to simulate a value in input.element.files and changes to input.element.value in Jest, but not necessarily accurately simulating every DOM behavior, you can do it by defining a getter/setter for those fields. This works for me:

let localImageInput
let localImageInputFiles
let localImageInputValueGet
let localImageInputValueSet
let localImageInputValue = ''

beforeEach(function() {
  localImageInput = wrapper.find('#local-image-input')
  localImageInputFilesGet = jest.fn()
  localImageInputValueGet = jest.fn().mockReturnValue(localImageInputValue)
  localImageInputValueSet = jest.fn().mockImplementation(v => {
    localImageInputValue = v
  })

  Object.defineProperty(localImageInput.element, 'files', {
    get: localImageInputFilesGet
  })

  Object.defineProperty(localImageInput.element, 'value', {
    get: localImageInputValueGet,
    set: localImageInputValueSet
  })
})

it('should do the thing', function() {
  localImageInputValue = 'some-image.gif'
  localImageInputFilesGet.mockReturnValue([{
    size: 12345,
    blob: 'some-blob',
    width: 300,
    height: 200
  }])

  localImageInput.trigger('change')

  return Vue.nextTick().then(() => {
    // Assuming the component sets input.value = '' when this event is triggered
    // and calls someFn with the image data
    expect(localImageInputValue).toEqual('')
    expect(someFn.mock.calls[0][0]).toEqual({
      size: 12345,
      blob: 'some-blob',
      width: 300,
      height: 200
    })
  })
}

You could do this using the DataTransfer object. Unfortunately, it hasn't been added to JSDOM, so you can't test in Jest. There's an open issue to add the object—https://github.com/jsdom/jsdom/issues/1568

If you ran your tests in a browser using Karma, you could test like this:

const wrapper = shallow(FormComponent)
const input = wrapper.find('input[type="file"]')
const dT = new ClipboardEvent('').clipboardData || new DataTransfer()
dT.items.add(new File(['foo'], 'programmatically_created.txt'))
input.element.files = dT.files
input.trigger('change')