typescriptvuejs3vue-test-utilsvitest

How to simulate or Mock file selection with input[type=file] tag in vitest using vue test util


I have a component which is having an input tag of type=file. I want write a vitest test function, to simulate selection of file and assert its effects.

Gemini gives below script but fails at line 6, where fileInput.element.files is not a property it complains.

import { mount } from '@vue/test-utils';
it('simulates file selection', async () => {
  const wrapper = mount(MyComponent);
  const fileInput = wrapper.find('input[type="file"]');
  const mockFile = new File(['content'], 'filename.txt', { type: 'text/plain' });
  await fileInput.element.files = [mockFile]; // Assign mock file to the input element
  await fileInput.trigger('change');
  // Now you can test your component's behavior after file selection
  expect(wrapper.emitted('fileSelected')).toBeTruthy(); // Assuming your component emits an event on file selection
});

Solution

  • I've had the same issue and the workaround was to manually define the files property:

    Object.defineProperty(input.element, 'files', {
      value: [mockFile],
    })