Missing input elements from Form event in Submit handler

ldm-acn commented 4 months ago

Describe the bug

Testing a component that contains a form with Vitest and React Testing Library in a Next project leads to a submit event that doesn't contain the input elements that are part of the form itself.

Reproduction

I recreated the issue with a minimal example here

If you try to interact with the form from the ui preview you should see the input field content be printed to the console.

If you try to run npm run test you'll see an error because event.currentTarget doesn't contain an element called "field".

System Info

System:
  OS: Linux 5.15 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
  CPU: (12) x64 12th Gen Intel(R) Core(TM) i7-1265U
  Memory: 5.91 GB / 7.58 GB
  Container: Yes
  Shell: 5.2.15 - /bin/bash
Binaries:
  Node: 22.1.0 - /usr/local/bin/node
  npm: 10.7.0 - /usr/local/bin/npm
  pnpm: 9.1.0 - /usr/local/bin/pnpm
npmPackages:
  @vitejs/plugin-react: ^4.2.1 => 4.2.1 
  vitest: ^1.6.0 => 1.6.0

Used Package Manager

pnpm

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
[X] The provided reproduction is a minimal reproducible example of the bug.

hi-ogawa commented 4 months ago

This looks like a jsdom issue since it works on happy-dom. You would probably need to report it there to see if this is supported. https://stackblitz.com/edit/stackblitz-starters-mzb5tx?file=components%2FForm.tsx

Btw, it looks like new FormData(e.currentTarget) is working for both.

stdout | components/jsdom.test.tsx > repro jsdom
[handleSubmit] field.value =  undefined
[FormData.entries] { field: 'abc123' }

stdout | components/happy-dom.test.tsx > repro happy-dom
[handleSubmit] field.value =  abc123
[FormData.entries] { field: 'abc123' }

sheremet-va commented 18 hours ago

Link to the jsdom issue: https://github.com/jsdom/jsdom/issues/3715

Closing this as I don't see any reason to keep this open in Vitest.

vitest-dev / vitest