title: How to test FileReader onload using simulate change in jest?
body: <p>SimpleDialog.jsx</p>
  
  <pre><code>const [imagePreview, setImagePreview] = React.useState(null);
  
  const handleChangeImage = event =&gt; {
      let reader = new FileReader();
      let file = event.target.files[0];
  
      reader.onload = event =&gt; {
          console.log(event);
  
          setImagePreview(event.target.result);
      };
  
      reader.readAsDataURL(file);
  };
  
  return (
      &lt;div&gt;
          &lt;input
              accept="image/*"
              id="contained-button-file"
              multiple
              type="file"
              style={{ display: 'none' }}
              onChange={handleChangeImage}
          /&gt;
  
          &lt;img id="preview" src={imagePreview} /&gt;
      &lt;/div&gt;
  );
  </code></pre>
  
  <p>SimpleDialog.test.js</p>
  
  <pre><code>it('should change image src', () =&gt; {
      const event = {
          target: {
              files: [
                  {
                      name: 'image.png',
                      size: 50000,
                      type: 'image/png'
                  }
              ]
          }
      };
  
      let spy = jest
          .spyOn(FileReader.prototype, 'onload')
          .mockImplementation(() =&gt; null);
  
      wrapper.find('input[type="file"]').simulate('change', event);
  
      expect(spy).toHaveBeenCalled();
  
      expect(wrapper.find('#preview').prop('src')).not.toBeNull();
  });
  </code></pre>
  
  <p>When running the test it gives me the error <em>TypeError: Illegal invocation</em>.</p>
  
  <p>Anyone who can help me with this unit test? I Just want to simulate on change if the <em>src</em> of an image has value or not.</p>