React testing library - userEvent upload to input: "cannot find toLowerCase"-CodePudding

So i'm trying to write a simple test where i add a file to an input. Here's the element:

<input accept="image/*" className={classes.newPhotoInput} id="contained-button-file" type="file" name="doc" onChange={setPhoto} />
<label htmlFor="contained-button-file">
  <Button id="photo" variant="outlined" component="span">
    Загрузить новое фото
  </Button>
</label>

Here's the test:

 it('check the callbacks', async ()=>{
        const file = new File(['(⌐□_□)'], 'test.png', { type: 'image/png' });
        const wrapper = mount(<AddDefect {...props}/>);
        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(()=>{
            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();

    })

And here's what's going on in my package.json:

"jest": {
    "testEnvironment": "jsdom",
    "moduleFileExtensions": [
      "js",
      "jsx"
    ],
    "moduleDirectories": [
      "node_modules"
    ],
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|esm)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|scss)$": "<rootDir>/__mocks__/styleMock.js"
    },
    "setupFilesAfterEnv": [
      "./src/setupTests.js"
    ]
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.15.5",
    "@babel/preset-env": "^7.15.6",
    "@babel/preset-react": "^7.14.5",
    "@testing-library/dom": "^8.11.0",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.6",
    "jsdom": "18.0.1",
    "jsdom-global": "3.0.2",
    "regenerator-runtime": "^0.13.9"
  }

The error i get on the test:

 TypeError: Cannot read property 'toLowerCase' of undefined

    Ignored nodes: comments, <script />, <style />
    <html>
      <head />
      <body />
    </html>...

      206 |         const input = wrapper.find('#contained-button-file').at(0);
      207 |         await waitFor(()=>{
    > 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)

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?

CodePudding user response：

Got through this by using the testing library instead of enzyme, turns out enzyme isn't really suited for the material ui stuff.