Missing input elements from Form event in Submit handler
ldm-acn opened this issue · comments
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
- Follow our Code of Conduct
- Read the Contributing Guidelines.
- Read the docs.
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
- The provided reproduction is a minimal reproducible example of the bug.
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' }