Allow to select file twice in input element

[weyert]

• dom-testing-library version:
• react version:
• node version:
• npm (or yarn) version:

Relevant code or config:

    test('should allow selecting the same file again', async () => {
      const {getByLabelText, getByAltText, getByText, getByTestId, debug} = renderWithFormik(<TextInput component={ImageField} name="image" showFilename={true} />)

      const file = new File(['(⌐□_□)'], 'chucknorris.png', { type: 'image/png' })
      expect(file.name).toBe('chucknorris.png')
      const imageInput = getByLabelText('Choose a file…')
      fireEvent.click(imageInput)
      fireEvent.change(imageInput, { target: { files: [file] } })
      await wait(() => {
        getByAltText('Preview')
        getByText('chucknorris.png')
      })

      const secondFile = new File(['(⌐□_□)'], 'chucknorris.png', { type: 'image/png' })
      expect(secondFile.name).toBe('chucknorris.png')
      fireEvent.click(imageInput)
      fireEvent.change(imageInput, { target: { files: [secondFile] } })
      await wait(() => {
        getByAltText('Preview')
        getByText('chucknorris.png')
      })
  })

What you did:

I am trying to test a feature that my ImageField-component offers which is selecting an image and then select it again. The problem is that you need to clear out or nullify the value-property of the input-element to make this work in Safari and Chrome. I wanted to double check this possible but the unit test is failing for me with the following error:

FAILED
TypeError: Cannot redefine property: files
    at Function.defineProperty (<anonymous>)
    at Function.fireEvent.(anonymous function) [as change] (/app/node_modules/react-testing-library/node_modules/dom-testing-library/dist/events.js:337:14)
    at Object.change (/app/src/common-ui/components/form/ImageField.test.js:40:17)
    at <anonymous>

Reproduction:

You can reproduce the problem here:
https://codesandbox.io/s/x9mqvy6vqw

Problem description:

The problem is that the error Cannot redefine property: files due to special case made in the events.js of this library.

Suggested solution:

Allow to trigger change-event on a file-input element for a second time without the library giving a runtime error. The potential fix would be the following on line 317:

values: files, configurable: true

[kentcdodds]

That error message was all I needed. Thanks @weyert!

aa0aab7

[kentcdodds]

🎉 This issue has been resolved in version 3.11.3 🎉

The release is available on:

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

Your semantic-release bot 📦🚀