title: react-testing-library - how to simulate file upload to a <input type="file" /> element?
body: <p>I am using <a href="https://github.com/testing-library/user-event" rel="noreferrer">user-event</a> to try to have more 'realistic' user interactions. However, after I click on the input, it will not fire the <code>onChange</code> function because by default it would only bring up the file explorer for the user to upload a file. How do I simulate the user uploading a file?  </p>
  
  <p>My code:</p>
  
  <pre class="lang-js prettyprint-override"><code>// Component
  const FileInputComponent = ({ handleFileUpload }) =&gt; (
    &lt;div&gt;
      &lt;input type="file" id="testing" accept=".png,.jpg" onChange={handleFileUpload} /&gt;
      &lt;label htmlFor="testing"&gt;Input File Here&lt;/label&gt;
    &lt;/div&gt;
  );
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>// Test file
  test("Clicking on the label button calls the `handleFileUpload` function", () =&gt; {
    const handleFileUploadMockFn = jest.fn();
    const { getByLabelText } = render(&lt;FileInputComponent handleFileUpload={handleFileUploadMockFn} /&gt;
    userEvent.click(getByLabelText("Input File Here"));
    expect(handleFileUploadMockFn).toHaveBeenCalledTimes(1);
  });
  </code></pre>