Mocking file input in React TestUtils
<p>I have a component with the following render function:-</p>
<pre><code>  render: function() {
   &lt;input
    type=&quot;file&quot;
    name: this.props.name,
    className={this.props.className}
    onChange={this.props.handleChange}
    accept={this.props.accept}/&gt;
 }
</code></pre>
<p>State is managed by a container which uploads the file server-side using jquery AJAX call:</p>
<pre><code> getInitialState: function() {
   return {
     uploaded: false
  };
}

handleChange: function(event) {
event.preventDefault();

var file = event.target.files[0];
if (!file) {
  return;
}

var reader = new FileReader();
reader.readAsText(file, 'UTF-8');
var self = this;

reader.onload = function(e) {
  var content = e.target.result;

 var a =  $.ajax({
    type: 'PUT',
    url: 'http://localhost:8080/upload',
    contentType: 'application/json',
    dataType: &quot;json&quot;,
    data: JSON.stringify({
      &quot;input&quot;: content
    })
  })
  .fail(function(jqXHR, textStatus, errorThrown) {
    console.log(&quot;ERROR WHEN UPLOADING&quot;);
  });

 $.when(a).done(function() {
      self.setState({
      uploaded: true,
      });
  });

  } 
} 
</code></pre>
<p>This works flawlessly with the server running.
However, I'd like to test without the need to invoke the server.
Here's the Mocha test I have written so far:</p>
<pre><code>var React = require('react');
var assert = require('chai').assert;
var TestUtils = require('react-addons-test-utils');
var nock = require(&quot;nock&quot;);
var MyContainer = require('../containers/MyContainer');

describe('assert upload', function () {
  it(&quot;user action&quot;, function () {

    var api = nock(&quot;http://localhost:8080&quot;)
        .put(&quot;/upload&quot;, {input: &quot;input&quot;})
        .reply(200, {
        });

  var renderedComponent = TestUtils.renderIntoDocument(
          &lt;MyContainer /&gt;
  );

  var fileInput = TestUtils.findAllInRenderedTree(renderedComponent,
           function(comp) { 
                           return(comp.type == &quot;file&quot;);
                          });

 var fs = require('fs') ;
 var filename = &quot;upload_test.txt&quot;; 
 var fakeF = fs.readFile(filename, 'utf8', function(err, data) {
    if (err) throw err;
 });

  TestUtils.Simulate.change(fileInput, { target: { value: fakeF } });

  assert(renderedComponent.state.uploaded === true);
  });
});
</code></pre>
<p>Getting this error:-</p>
<pre><code>TypeError: Cannot read property '__reactInternalInstance$sn5kvzyx2f39pb9' of undefined
</code></pre>