Simulating uploading file

[UnderNotic]

Is there a way to simulate or fire event to trigger change event on input that is used for uploading files?

[gnapse]

I think it should be possible using fireEvent.

Have you tried something like this below:

import React from 'react'
import {renderIntoDocument, fireEvent} from 'react-testing-library'

test('some test', () => {
  const {getByLabelText} = renderIntoDocument(
    <div>
      <label htmlFor="avatar">Avatar</label>
      <input id="avatar" type="file" />
    </div>
  )
  const fileInputField = getByLabelText('Avatar')
  const event = {
    target: {
      value: '/not/sure/what/goes/in/here',
    },
  }
  fireEvent.change(fileInputField, event)
  // expect here things that should have happened when the file input changed
})

Never tried it myself, and can't try it now, but I'd assume is similar to a regular text input field change event. You should pass in the event object above something that resembles the relevant parts of the actual event object that would be passed in a real situation in the browser.

[UnderNotic]

Hey @gnapse,

I've tried your approach - I don't get any runtime errors but this is not triggering onChange event on react side. Is that the case also for You?Any ideas why this is happening?

One thing I can add, with enzyme simulate everything seems to be alright:

wrapper.find('#files').simulate('change', {
      target: {
         files: [
           'dummyValue.something'
         ]   
      }
    });

[gnapse]

I think you're right. I was able to create an example that reproduces the problem: https://codesandbox.io/s/yp6y4ynlqx

If the input is type="text" the spy function is called. By simply changing it to type="file" the tests do not pass anymore. I changed it to type="email" and it works too (understandably, that type is particular kind of text). It looks like there's something special about file inputs.

I think this is actually an issue for dom-testing-library but I'll dig more into it in the mean time, before asking you to open the issue there.

[kentcdodds]

Hi! I've done this in a work project and I remember I had to do some slightly odd stuff to make it work. Tomorrow I'll be able to reference what I did and I'll give an example here.

[kentcdodds]

Here's what I've got for that test:

test('can select an image and upload will make a request to upload it', async () => {
  const { container, getByLabelText, getByText, getByAltText } = render(
    <ProfilePhoto />,
  )
  const file = new File(['(⌐□_□)'], 'chucknorris.png', { type: 'image/png' })
  const imageInput = getByLabelText('choose image')
  Simulate.change(imageInput, { target: { files: [file] } })

  await wait(() => getByAltText('image-preview'))
  const dataURL = getByAltText('image-preview').src
  expect(dataURL).toMatchSnapshot(
    'data url in the image-preview src for this string: "(⌐□_□)"',
  )

  // ensure the form is submittable
  expect(getByText('Upload Image').type).toBe('submit')

  // submit the form
  Simulate.submit(container.querySelector('form'))
  expect(mockClient.request).toHaveBeenCalledTimes(1)
  expect(mockClient.request).toHaveBeenCalledWith(expect.any(String), {
    dataURL,
  })
})

[kentcdodds]

Because this is neither a bug report or a feature request, I'm going to go ahead and close this. Please feel free to ask questions in the spectrum community: https://spectrum.chat/react-testing-library

[hoodwink73]

Heyya @kentcdodds

I was trying out the method you suggested above. But I had a problem in the actual code handler.

It somewhat looks like this

  const handleImageUpload = e => {
    console.log(e.target.files[0]) // undefined while testing
    this.onRequestImageUpload(e.target.files[0]) // this works fine in browser
  }

So, I had to do this in test

test('<UserAvatar /> | Uploading an image should open a modal', () => {
  const {getByLabelText} = render(<UserAvatar name="Arijit" />)

  const inputEl = getByLabelText('Upload new picture')
  const file = new File(['(⌐□_□)'], 'chucknorris.png', {
    type: 'image/png',
  })

  // i have to do this because `input.files =[file]` is not allowed
  Object.defineProperty(inputEl, 'files', {
    value: [file]
  })

  fireEvent.change(inputEl)

  // check for modal now
})

I figured this out from jsdom/jsdom#1272

Can you please confirm this? Can your handler just reference files[0] while testing.

Again thanks a lot. You are awesome.

[kentcdodds]

Hi @hoodwink73, so are you saying what you have there is working? Or is it not? Are you just asking if there's a way to get around the defineProperty thing? If that's all you're asking, my answer is I don't know, but probably not. I wouldn't worry about it though. Good luck!

[hoodwink73]

The defineProperty thing is working. And yes, I guess I can live with it. 😊

My question was, did this Simulate.change(imageInput, { target: { files: [file] } }) work for you?

[kentcdodds]

It did work for me. Now Simulate is removed though and I haven't had a chance to try the fireEvent version on my codebase but I'm pretty sure it'll work the same way.

[krzystof]

@kentcdodds I followed what's written here, and in my test I do this:

const file = new File(['dummy content'], 'example.png', {type: 'image/png'})
const imageInput = getByLabelText('Select an image')
fireEvent.change(imageInput, {target: {files: [file]}})

But in my component

selectFile = e => {
  // e.target.files[0] is undefined
  this.setState({file: e.target.files[0]})
}

Works nicely in the browser though.

Might that 👇 be the issue?

If you want to trigger the onChange handler of a controlled component with a different event.target.value, sending value through eventProperties won't work like it does with Simulate.

[kentcdodds]

That's probably the problem. Perhaps you can try:

const file = new File(['dummy content'], 'example.png', {type: 'image/png'})
const imageInput = getByLabelText('Select an image')
imageInput.files = [file]
fireEvent.change(imageInput)

I haven't updated my implementation to the latest version yet so I haven't tried this. Good luck!

[krzystof]

That throws TypeError: Failed to set the 'files' property on 'HTMLInputElement': The provided value is not of type 'FileList'..
From what I have found, files is a read only property on an input of type file. It also look like FileList` is a read only object that can't be easily created.

I have reverted to version 3 to use Simulate for now.

[hoodwink73]

Hey, @krzystof

Try something like this

test('<UserAvatar /> | Uploading an image should open a modal', () => {
  const {getByLabelText} = render(<UserAvatar name="Arijit" />)

  const inputEl = getByLabelText('Upload new picture')
  const file = new File(['(⌐□_□)'], 'chucknorris.png', {
    type: 'image/png',
  })

  // i have to do this because `input.files =[file]` is not allowed
  Object.defineProperty(inputEl, 'files', {
    value: [file]
  })

  fireEvent.change(inputEl)

  // check for modal now
})