userEvent.upload(input, file) seems by pass the form validity check

[junyongz]

just recently pay more effort into react library & javascript development for the past few months.

I wonder below line would causing problem for validity() routine call in HTMLInputElement-impl.js

user-event/src/utils/edit/setFiles.ts

Line 45 in 63ac399

files: {

  Object.defineProperties(el, {
    files: {
      configurable: true,
      get: () => files,
    },

https://github.com/jsdom/jsdom/blob/ff2bec0633095efeba38ba14fbdaaa2938660dcf/lib/jsdom/living/nodes/HTMLInputElement-impl.js#L959

            // https://html.spec.whatwg.org/multipage/input.html#file-upload-state-(type=file)
            // Constraint validation: If the element is required and the list of selected files is
            // empty, then the element is suffering from being missing.
            case "file":
              if (this._required && this.files.length === 0) {
                return true;
              }

I can't really get to pass the form.validity() check after done the userEvent.upload(element, files) call

simple snippet to simulate, by right, that only file upload input in the form should be valid

test('file upload', async () => {
    const user = userEvent.setup()
    render(<form aria-label='upload form'>
        <input type="file" name="upload-file" role="button" required="true" accept='image/*' aria-label='upload image'></input>
    </form>)

    const file = new File([Uint8Array.from(atob('/9j/4AAQSkZJRgABAQEAAAAAAA=='), c => c.charCodeAt(0)).buffer], 'test.jpg', { type: 'image/jpeg' })

    const input = screen.getByRole('button', {name: 'upload image'})
    await user.upload(input, [file])
    expect(input.files[0]).toEqual(file)

    const form = screen.getByLabelText('upload form')

    expect(form.checkValidity()).toBeTruthy()
    expect(Array.from(form.elements).filter(v => !v.validity.valid)).toHaveLength(0)
})

[junyongz]

See also in #1133 #1223 #1155

[junyongz]

// would need to spy on the form to bypass it
    const checkValidity = jest.spyOn(screen.getByLabelText('upload form'), 'checkValidity')
    checkValidity.mockReturnValueOnce(true)