DEV Community

Discussion on: Testing Forms in React using Enzyme and Jest

Collapse
 
frosso profile image
Francesco

I'd also recommend not to inspect setState for testing.
I know that this is only an example, but in my personal experience I'd also recommend using the non-controlled version of the inputs when possible, and this seems to be the case.
That way all the setState become unnecessary.
The onSubmit event on the form will receive the event, which contains the values of the inputs. You can get rid of a lot of boilerplate code, that way 😉

Collapse
 
ehaynes99 profile image
Eric Haynes

I came here to call you a liar... surely it's not that simple. Even the React docs focus almost exclusively on controlled components, and have a small section that suggests that to use uncontrolled components, you need refs. The belief is so prolific that we have some rather monstrous Rube Goldberg machines to "help" with this (Looking at you, psychopaths who made redux-form).

But he's right folks. 9/10 times this will do just fine:

const handleSubmit = (event) => {
  event.preventDefault()
  const formData = new FormData(event.target)
  doSomethingWithFormData(Object.fromEntries(formData))
}

Thanks for reminding me to always question convention. ;-)