Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Missing input elements from Form event in Submit handler #5699

Open
6 tasks done
ldm-acn opened this issue May 9, 2024 · 1 comment
Open
6 tasks done

Missing input elements from Form event in Submit handler #5699

ldm-acn opened this issue May 9, 2024 · 1 comment

Comments

@ldm-acn
Copy link

ldm-acn commented May 9, 2024

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

@hi-ogawa
Copy link
Contributor

hi-ogawa commented May 11, 2024

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' }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants