File upload fails in happy-dom

[DGollings]

Reproduction example

https://codesandbox.io/s/wonderful-shadow-zqehu0

Prerequisites

Open a new terminal npx vitest

Expected behavior

Test passes

Actual behavior

Test fails - but edit vite.config.ts to jsdom and it'll pass

User-event version

14.1.1

Environment

Testing Library framework:

JS framework:

Test environment:

DOM implementation:

Additional context

Not sure if this has anything to do with user-event, but it might be related to testing-library/vue-testing-library#267 ? I seem to run into all kinds of minor/weird issues using this 'stack'

[ph-fritsche]

The environment doesn't implement FileList. Workaround:

class FileList {
  readonly length: 0;
  readonly item: (index: number) => undefined;
  readonly [Symbol.iterator] = function* next() {};
}
Object.defineProperty(globalThis, "FileList", {
  configurable: true,
  enumerable: false,
  get: () => FileList
});

The environment also incorrectly implements HTMLInputElement.files as writable property { value: [], writable: true, enumerable: true, configurable: true } on the element. Workaround (after the element is created):

  Object.defineProperty(input, "files", {
    configurable: true,
    enumerable: false,
    get: () => new FileList()
  });

This is not a bug with user-event, but we might make our implementation more robust for such environments. Let's keep the issue open.

[DGollings]

Hi Philipp,

Thanks, can confirm the workarounds work.

For my education/amusement, what does 'this environment' mean? All of it? (Vue 3+Vite+Vitest+happy-dom)
Or specifically happy-dom? Because I'd be quite surprised to hear I'm the only person 'uploading' 'files' with happy-dom :)

Either way, thanks

[ph-fritsche]

From the user-event perspective "the environment" is everything that is neither your component, your test code, nor brought by user-event. In your stack it's specifically happy-dom that is responsible for implementing the DOM and it doesn't implement FileList and HTMLInputElement.files correctly.

[github-actions]

🎉 This issue has been resolved in version 14.4.0 🎉

The release is available on:

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

Your semantic-release bot 📦🚀

[ph-fritsche]

@all-contributors add @DGollings bug