testing Add Folder with jest & testing-library
jestrickler opened this issue · 1 comments
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)
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...