value vs attribute

[m5nv]

I posted this on Spectrum before I found out about GitHub Discussions... Spent a good four hours before I got clued in. I don't know the why and would love to know it. But in case anyone else is trying to move from Formik to RHF and find all their tests breaking then this may be of help.

Problem
RTL tests that were passing with Formik start to fail after moving to RHF.

The issue is userEvent.type(email, 'not-an-email', 100) doesn't set {target: {value: 'not-an-email'}} visibly into the dom.

The tests pass when using Formik because value is visibly set by Formik.

This works with Formik:

  expect(password).toHaveAttribute('value', 'password');

But fails with RHF. To fix it we have to check for value and not attribute as below:

  expect(password.value).toBe("password");

When you do a screen.debug(password), there is no value attribute in the output.

This is a pretty big surprise for those moving from Formik to RHF. I think it is worth documenting

• (a) what is the proper way to test for values, and
• (b) why that is better than Formik.

My two cents.

[bluebill1049]

For testing take a look at this section:
https://react-hook-form.com/advanced-usage#TestingForm
https://react-hook-form.com/faqs#TestingReactHookForm

For the difference, one is Controlled form, RHF is uncontrolled.

let me know if you need more explanation.

more difference: https://react-hook-form.com/faqs#ReactHookFormFormikorReduxForm

[m5nv]

Thanks.

I am learning the ropes. Here is a summary of differences that personally bit me in porting from Formik to React Hook Forms:

• No setStatus method of Formik for application's state
  This means that when moving to RHF, the application has to use useState to manage server errors.
  This is resolved and an example of how to achieve the same functionality can be found here and here
• Async form submit
  Not an issue in the library itself. Formik's flexibility can lead to bad design in other layers. For example, I was leaking implementation details into Redux async action creators. Moving to RHF provided an opportunity to cleanup Redux action creators in our project. It took a while to dig into this one, but it's certainly worth putting the the effort to keep the Redux layer free from knowing about its users.
• Yup schema validation order
  Formik (I think) is smart enough to trigger required validation first on an empty field (onBlur). In RHF one has to modify their yup schema to place the validations in the order of triggering. Again this took a few hours to figure out what was going on. I am not sure if I should file a bug report because I am not sure of the interactions between Yup and RHF resolver, and what the contract is. On the one hand separation of concerns principle suggests that RHF is correct, and on the other hand principle of least surprise suggests that may be RHF's resolver should be a bit smarter.
• Default validation mode
  The default validation mode is onSubmit in RHF. This is great for performance but in practice users want instantaneous feedback and that translates to setting mode to all, which I think is the default in Formik. What this means is most tests written for Formik that count on error messages being displayed will fail. The solution is to set mode to all. I still have it on my todo list to see if using watch feature of RHF can provide performance and functionality. I am not sure.
• React Testing Library
  Because RHF defaults to supporting uncontrolled components, some tests fail that use toHaveAttribute('value', '...'). Not much can be said about this other than to be aware. The second issue I have encountered is reusing cached element references doesn't work as they do in Formik tests. So if you are looking for appearance and disappearance then the tests pass only if the element is queried for again. I also encountered a probable bug either in documentation or implementation of waitForElementToBeRemoved in RTL. It only works with a callback and not with a direct reference to an element that's already queried.

Overall, I like the design of RHF. I moved to RHF because of the size and its ability to work with uncontrolled components. This allows the developers coming from semantic html and semantic css to move fast.

Cheers!

[bluebill1049]

@m5nv thanks for the comprehensive feedback. personally I have really appreciated the detail here. In terms of yup validation one, could you provide some examples to explain? I am more than happy to investigate if this is a bug or something we could or should improve.

[bluebill1049]

also side note: i think you probably can opt-in onTouched mode for your validation. we also only trigger re-render when errors appear and disappeared, some optimization for the form.

[m5nv]

In the image above, the left passes with Formik. I had to reorder the 'validations' to make the tests pass. The issue, in this instance, is that Email is required message is not triggered when the user (test) tabs out of the email field (i.e when it is empty). So the tests that look for that 'string' fail. They started passing once I reordered.

Thanks for the tip for onTouched; will try when I finish this round of refactoring in order to completely move into RHF.

[bluebill1049]

oh i see... interesting. i will take a look at that.