input type="file" - upload() doesn't trigger onChange in React

[ybentz]

• @testing-library/user-event version: 12.0.0+
• Testing Framework and version: jest@26.1.0
• DOM Environment: jsdom@16.2.2

Relevant code or config:

All relevant code is in the codesandbox, no special config needed.

What you did:

I have a project with a form that includes a <input type="file"/>. I wrote a test for the form that was working well up until I upgraded from v11 to v12. I created a simple codesandbox that reproduces the issue.
The repro includes a simple form with just the relevant input element and a form clear button because the value is read-only and I wanted to make sure the test is clean. The test calls userEvent.upload to upload a fake file and checks if the callback inside of onChange was called.

What happened:

In the small repro sandbox the test is passing on v11 (11.4.2 specifically, which is the latest) but fails on 12.0.0.

Reproduction repository:

https://codesandbox.io/s/testing-library-user-event-file-input-change-event-728w8

Problem description:

In React, onChange is not triggered when using userEvent.upload(...) to add a file to a <input type="file"/>.
When I came to file this issue I found this similar issue that already has a merged fix PR so I suspect the solution should be pretty straight forward requiring a similar for upload as was changed for selectOptions. Considering this is the second function that broke in the same way, it's probably worth it to check if there are more similar cases as well.

Suggested solution:

The solution should be very similar to this merged PR. I can try to get a PR for it this evening but I figured I'd file the issue now in case someone else can get it done earlier.

[kentcdodds]

Pull request would be appreciated 👍👍

[ybentz]

@kentcdodds I have the fix + tests pretty much ready to go but when trying to commit any changes the pre-commit hook fails with this linter error:

This is obviously not related to the PR itself and I see that this is the case all across the user-event library that imports from /dom directly. This is my first time contributing to this repo so I don't want to make any assumptions on what to do to fix/bypass it.

[kentcdodds]

The last line in the screenshot shows you how to bypass this.

I think if you update your branch to the latest on master then this should be fixed.

[ybentz]

Thanks for the quick reply!

The last line in the screenshot shows you how to bypass this.

Cool, I figured that much but didn't know if that's the preferred way to go so I asked first.

I think if you update your branch to the latest on master then this should be fixed.

I forked from the latest commit on master and looking at the code, it's still importing from there so unless the fix happened somewhere else I don't think it's fixed yet.

[kentcdodds]

We should disable that rule in the package.json of this project. I can do that later, or if you'd like to do that before me that would be welcome as well.

[ybentz]

Sure. I'll submit a PR shortly.

[kentcdodds]

🎉 This issue has been resolved in version 12.0.8 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[tmanundercover]

I am still having this issue.

[ph-fritsche]

@tmanundercover Could you please try to create a reproduction at codesandbox?
The issue as described above is solved. There is a test ensuring that we fire those input and change events.

user-event/src/__tests__/upload.js

Lines 4 to 36 in 673c225

	test('should fire the correct events for input', () => {
	const file = new File(['hello'], 'hello.png', {type: 'image/png'})
	const {element, getEventSnapshot} = setup('<input type="file" />')
	userEvent.upload(element, file)
	// NOTE: A known limitation is that it's impossible to set the
	// value of the input programmatically. The value in the browser
	// set by a user would be: `C:\\fakepath\\${file.name}`
	expect(getEventSnapshot()).toMatchInlineSnapshot(`
	Events fired on: input[value=""]
	input[value=""] - pointerover
	input[value=""] - pointerenter
	input[value=""] - mouseover: Left (0)
	input[value=""] - mouseenter: Left (0)
	input[value=""] - pointermove
	input[value=""] - mousemove: Left (0)
	input[value=""] - pointerdown
	input[value=""] - mousedown: Left (0)
	input[value=""] - focus
	input[value=""] - focusin
	input[value=""] - pointerup
	input[value=""] - mouseup: Left (0)
	input[value=""] - click: Left (0)
	input[value=""] - blur
	input[value=""] - focusout
	input[value=""] - focus
	input[value=""] - focusin
	input[value=""] - input
	input[value=""] - change
	`)
	})