FAQ - Testing Library

How do I test file upload?

How do I test file upload?

Use the upload utility from @testing-library/user-event. It works well in both jsdom and happy-dom.

tsx

test('upload file', async () => {
  const user = userEvent.setup()

  await render(<Uploader />)
  const file = new File(['hello'], 'hello.png', {type: 'image/png'})
  const input = screen.getByLabelText(/upload file/i)

  await user.upload(input, file)

  expect(input.files[0]).toBe(file)
  expect(input.files.item(0)).toBe(file)
  expect(input.files).toHaveLength(1)
})