userEvent.upload() files attribute is only a getter v14

[borja-sanz-sanz]

Hey everyone,

I've been digging into the changes in version 14, particularly focusing on userEvent.upload. One of the significant changes I've noticed is how it handles the files attribute of the HTMLInputElement.

You could read and write the files attribute directly in previous versions. However, in the latest version, this attribute has been transformed into a getter property, meaning you can only retrieve its value, but you can't assign new values to it.

This change has caught my attention because it deviates from the usual behavior of the HTMLInputElement. Normally, you can directly set the files property to upload files or manipulate them as needed. The problem with this new approach is that it may lead to issues in testing scenarios. Imagine a situation where someone is modifying the files attribute directly, the test will not work.

To address this potential source of confusion and make userEvent.upload more user-friendly, I propose adding a setter method for the files attribute. This would align the behavior of userEvent.upload with the standard behavior of HTMLInputElement. Developers and testers would then have a more consistent and intuitive experience when working with this library.

I've found this issue because I need to modify the files attribute directly, It's working correctly but when I try to test that the userEvent.upload() method is rewriting my actual input and throws an error saying that I cannot modify only getter property. This was not happening on v13.

I'm talking of this part of code in src/utils/edit/setFiles.ts file

Object.defineProperties(el, {
    files: {
      configurable: true,
      get: () => files,
      // PROPOSED CHANGE: I think a setter is needed here as in value or type
     // set: (v) => v
    },
    value: {
      configurable: true,
      get: () => (files.length ? `C:\\fakepath\\${files[0].name}` : ''),
      set(v: string) {
        if (v === '') {
          restore()
        } else {
          valueDescr?.set?.call(el, v)
        }
      },
    },
    type: {
      configurable: true,
      get: () => 'file',
      set(v: string) {
        if (v !== 'file') {
          restore()
          // In the browser the value will be empty.
          // In Jsdom the value will be the same as
          // before this element became file input - which might be empty.
          ;(el as HTMLInputElement).type = v
        }
      },
    },`

I'm eager to hear your thoughts on this proposal and whether it could be a beneficial addition to the library.

Thanks for your input!

[AlexLo33]

Hello !
I'm undigging this thread, i face the same issue with a custom React Uploader... does anyone has any workaround ?