Same file upload doesn't fire input event, even when clearing input.value

[lucaslcode]

• @testing-library/user-event version: 12.8.2

• Testing Framework and version: jest 26.6.0
• DOM Environment: jsdom 16.4.0

Relevant code or config

const handleChange = jest.fn();
render(<InputComponent changeHandler={handleChange} />);
const inputEl = screen.getByLabelText("Select file") as HTMLInputElement;
const file = new File([], "image.jpg");
userEvent.upload(inputEl, file);
await waitFor(() => expect(handleChange).toBeCalled());

inputEl.value = "";
userEvent.upload(inputEl, file);
//fails
await waitFor(() => expect(handleChange).toBeCalledTimes(2));

What you did:
In #575, upload was changed so it correctly doesn't fire an onChange/onInput event when the same files are selected. In our use case, we do want it to fire again, and our workaround is adding an onClick event that sets inputEl.value = "".

What happened:
Second input event doesn't fire, even when the value is reset to blank.

Problem description:
Looking at the source, it doesn't appear to take value into account.

Suggested solution:
It should consider the value of the input field, but I'm not sure how the value relates to input.files, which is what is normally used.

[ph-fritsche]

This seems to be an issue with jsdom.
The browser clears input.files if you programmatically set input.value = ''. Jsdom seems to not handle files or value at all.

See
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#value
https://codesandbox.io/s/clear-file-input-per-value-hq18c?file=/src/App.test.js

We aren't able to work around this by just setting input.value ourselves as setting input.value to a non-empty value causes errors in browsers.

[ph-fritsche]

This might also be an issue for dom-testing-library. As setting input.files per fireEvent.input decouples files and value in the browser.

[lucaslcode]

jsdom seems to implement the correct behaviour for clearing: https://github.com/jsdom/jsdom/blob/bd50bbe219799980d9c9a173309cafcef3d9d8bc/lib/jsdom/living/nodes/HTMLInputElement-impl.js#L416

[lucaslcode]

Looking at the getters and setters for value and files there, I'm actually surprised that value remains as "" when files is changed.

[rrogowski]

@lucaslcode I have a similar use case where I'd like to clear a file input. I discovered that the upload API works fine when passed null (though I think the types need to be updated to reflect this):

userEvent.upload(screen.getByLabelText(/select file/i), file);
userEvent.upload(screen.getByLabelText(/select file/i), (null as unknown) as File);
userEvent.upload(screen.getByLabelText(/select file/i), file);

In your example, this would cause the handleChange event handler to fire 3 times in total. I am thinking of submitting a PR to allow the second argument of upload to be null without having to do a (rather ugly 😅) type cast.

Update You can also pass [] as the second parameter without need to type cast.

userEvent.upload(screen.getByLabelText(/select file/i), file);
userEvent.upload(screen.getByLabelText(/select file/i), []);
userEvent.upload(screen.getByLabelText(/select file/i), file);

[ph-fritsche]

The issue has been resolved in #794

https://codesandbox.io/s/solitary-mountain-vlttj?file=/src/index.test.js