vitest-dev / vitest

Next generation testing framework powered by Vite.

Home Page:https://vitest.dev

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

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