How to set HTML5 file type input with ReactTestUtils

Question

I have an HTML5 file type input in a React form similar to the following

<input type='file' ref='fileInput' onChange={this.onChange} multiple/>

and once a file is uploaded this.onChange accesses the selected files, validates them and transitions the form.

I'm trying to figure out how to test this functionality using ReactTestUtils.Simulate but cant figure out how to set the files that should be sent to the onChange callback in event.currentTarget.files.

Can anybody help guide me in the right direction to how I can mock/test this effectively?

lobobabysaurus · Accepted Answer · 2016-03-30 15:47:18Z

1

Found out that before TestUtils.Simulate.change is called the files need to be set on the object explicitly. Something similar to the following should work.

It's ES6 adapted from Coffeescript so I'm not sure if it is exactly correct syntax.

// Needs to be an integer keyed object instead of an array to mock a file set
const files = {
   0: {name: 'test.jpeg'},
   1: {name: 'test.mp4'}
};

const fileInput = TestUtils.findRenderedDOMComponentWithTag(<testView>, 'input');    
fileInput.files = files;
TestUtils.Simulate.change(fileInput)

answered Mar 30, 2016 at 15:47

lobobabysaurus

2472 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to set HTML5 file type input with ReactTestUtils

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related