testing Add Folder with jest & testing-library

[jestrickler]

Current versions ^1.9.0 have testing issues out of the box: #130; however, I was able to work with version 1.6.1. But when testing 'Add Folder', I either cannot seem to get the form to submit, or it leads to an error which I think might be related to it submitting:

dependencies:

"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.0.4",
"@testing-library/user-event": "^12.1.5",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-keyed-file-browser": "^1.6.1",
"react-scripts": "3.4.3"

browser.test.js

import React, {useState} from 'react';
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event'
import FileBrowser from 'react-keyed-file-browser'

const filesInit = [
  {
    key: 'file1.txt',
    size: 12288,
    modified: new Date(),
    url: 'https://localhost/file1.txt'
  },
  {
    key: 'folder1/file2.txt',
    size: 12288,
    modified: new Date(),
    url: 'https://localhost/folder1/file2.txt'
  }
]

const mockOnCreateFolder = jest.fn()

const TestBrowser = ({ editable }) => {
  const [files, setFiles] = useState(filesInit)
  return (
    <FileBrowser
      files={files}
      setFiles={setFiles}
      onCreateFolder={mockOnCreateFolder}
    />
  )
}

test('user can add folder
[browser-test.zip](https://github.com/uptick/react-keyed-file-browser/files/5380073/browser-test.zip)
[browser-test.zip](https://github.com/uptick/react-keyed-file-browser/files/5380078/browser-test.zip)
[browser-test.zip](https://github.com/uptick/react-keyed-file-browser/files/5380082/browser-test.zip)


', async () => {
  render(<TestBrowser />)
  userEvent.click(screen.getByText(/Add Folder/i))
  const nameInput = await screen.findByRole('textbox')

  // Nothing seems to submit the form?!?
  // 1) should submit from '{enter}'
  userEvent.type(nameInput, '{selectall}Test Folder{enter}')

  // 2) '{enter}' seperate
  // userEvent.type(nameInput, '{enter}')

  // 3) direct submit
  // const form = nameInput.parentNode
  // fireEvent.submit(form)

  // 4) '{enter}' on the form
  // const form = nameInput.parentNode
  // userEvent.type(form, '{enter}')

  // 5) create and click a submit button
  // const form = nameInput.parentNode
  // const submit = document.createElement('INPUT')
  // submit.setAttribute('type', 'submit')
  // form.appendChild(submit)
  // userEvent.click(submit)
  // doesn't get called or error :(
  await waitFor(() => expect(mockOnCreateFolder).toHaveBeenCalled())
});

Scenarios 1-3 fail for not calling onCreateFolder, 4-5 are maybe submitting, but produce the following error

Error: Uncaught [TypeError: Cannot read property 'value' of null]
    at reportException (/Users/stri40/Development/browser-test/node_modules/jest-environment-jsdom-fourteen/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:62:24)
    at Timeout.callback [as _onTimeout] (/Users/stri40/Development/browser-test/node_modules/jest-environment-jsdom-fourteen/node_modules/jsdom/lib/jsdom/browser/Window.js:673:7)
    at listOnTimeout (internal/timers.js:549:17)
    at processTimers (internal/timers.js:492:7) TypeError: Cannot read property 'value' of null
    at /Users/stri40/Development/browser-test/node_modules/react-keyed-file-browser/dist/react-keyed-file-browser.js:1:24171
    at Timeout.callback [as _onTimeout] (/Users/stri40/Development/browser-test/node_modules/jest-environment-jsdom-fourteen/node_modules/jsdom/lib/jsdom/browser/Window.js:671:19)
    at listOnTimeout (internal/timers.js:549:17)
    at processTimers (internal/timers.js:492:7)

sample project:
browser-test.zip
unzip
npm ci
npm test
(sorry, codesandbox seemed to have issues with testing-library: codesandbox/codesandbox-client#4922)

[jestrickler]

educated guess on the error: looks like it uses some refs when the name input is shown (new folder, rename) and seems there are issues with jsdom/jest/testing-library and refs being null...