title: React testing library - userEvent upload to input: "cannot find toLowerCase"
body: <p>So i'm trying to write a simple test where i add a file to an input. Here's the element:</p>
  <pre><code>&lt;input accept=&quot;image/*&quot; className={classes.newPhotoInput} id=&quot;contained-button-file&quot; type=&quot;file&quot; name=&quot;doc&quot; onChange={setPhoto} /&gt;
  &lt;label htmlFor=&quot;contained-button-file&quot;&gt;
    &lt;Button id=&quot;photo&quot; variant=&quot;outlined&quot; component=&quot;span&quot;&gt;
      Загрузить новое фото
    &lt;/Button&gt;
  &lt;/label&gt;
  </code></pre>
  <p>Here's the test:</p>
  <pre><code> it('check the callbacks', async ()=&gt;{
          const file = new File(['(⌐□_□)'], 'test.png', { type: 'image/png' });
          const wrapper = mount(&lt;AddDefect {...props}/&gt;);
          wrapper.find('#description').at(0).simulate('click');
          wrapper.find('#descriptionfield').at(0).find('input').at(0).simulate('change', { target: { value: 'test' } })
          const input = wrapper.find('#contained-button-file').at(0);
          
          await waitFor(()=&gt;{
              userEvent.upload(input, file)
              //{target:{files:[file]}}
          })
          expect(input.files.length).toBe(1);
          wrapper.find('#send').at(0).simulate('click');
          expect(onSendData).toHaveBeenCalled();
  
          wrapper.find('#back').at(0).simulate('click');
          expect(onBack).toHaveBeenCalled();
  
      })
  </code></pre>
  <p>And here's what's going on in my package.json:</p>
  <pre><code>&quot;jest&quot;: {
      &quot;testEnvironment&quot;: &quot;jsdom&quot;,
      &quot;moduleFileExtensions&quot;: [
        &quot;js&quot;,
        &quot;jsx&quot;
      ],
      &quot;moduleDirectories&quot;: [
        &quot;node_modules&quot;
      ],
      &quot;moduleNameMapper&quot;: {
        &quot;\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|esm)$&quot;: &quot;&lt;rootDir&gt;/__mocks__/fileMock.js&quot;,
        &quot;\\.(css|scss)$&quot;: &quot;&lt;rootDir&gt;/__mocks__/styleMock.js&quot;
      },
      &quot;setupFilesAfterEnv&quot;: [
        &quot;./src/setupTests.js&quot;
      ]
    },
    &quot;eslintConfig&quot;: {
      &quot;extends&quot;: &quot;react-app&quot;
    },
    &quot;browserslist&quot;: {
      &quot;production&quot;: [
        &quot;&gt;0.2%&quot;,
        &quot;not dead&quot;,
        &quot;not op_mini all&quot;
      ],
      &quot;development&quot;: [
        &quot;last 1 chrome version&quot;,
        &quot;last 1 firefox version&quot;,
        &quot;last 1 safari version&quot;
      ]
    },
    &quot;devDependencies&quot;: {
      &quot;@babel/core&quot;: &quot;^7.15.5&quot;,
      &quot;@babel/preset-env&quot;: &quot;^7.15.6&quot;,
      &quot;@babel/preset-react&quot;: &quot;^7.14.5&quot;,
      &quot;@testing-library/dom&quot;: &quot;^8.11.0&quot;,
      &quot;@testing-library/react&quot;: &quot;^12.1.2&quot;,
      &quot;@testing-library/user-event&quot;: &quot;^13.5.0&quot;,
      &quot;enzyme&quot;: &quot;^3.11.0&quot;,
      &quot;enzyme-adapter-react-16&quot;: &quot;^1.15.6&quot;,
      &quot;jsdom&quot;: &quot;18.0.1&quot;,
      &quot;jsdom-global&quot;: &quot;3.0.2&quot;,
      &quot;regenerator-runtime&quot;: &quot;^0.13.9&quot;
    }
  </code></pre>
  <p>The error i get on the test:</p>
  <pre><code> TypeError: Cannot read property 'toLowerCase' of undefined
  
      Ignored nodes: comments, &lt;script /&gt;, &lt;style /&gt;
      &lt;html&gt;
        &lt;head /&gt;
        &lt;body /&gt;
      &lt;/html&gt;...
  
        206 |         const input = wrapper.find('#contained-button-file').at(0);
        207 |         await waitFor(()=&gt;{
      &gt; 208 |             userEvent.upload(input, file)
            |                       ^
        209 |         })
        210 |         expect(input.files.length).toBe(1);
        211 |         wrapper.find('#send').at(0).simulate('click');
  
        at isElementType (node_modules/@testing-library/user-event/dist/utils/misc/isElementType.js:15:37)
        at Object.upload (node_modules/@testing-library/user-event/dist/upload.js:23:42)
        at src/Components/ViewDefects/tests/AddDefect.test.js:208:23
        at runWithExpensiveErrorDiagnosticsDisabled (node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/config.js:50:12)
        at checkCallback (node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/wait-for.js:136:77)
        at checkRealTimersCallback (node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/wait-for.js:128:16)
  </code></pre>
  <p>I've spent past few days trying to solve the problem, and this is how far i've gotten. Googling barely helps, haven't found a single question with a problem like this. Feels like i'm missing something simple, but just can't get it yet. Any help?</p>