React Testing Library - fireEvent vs userEvent

It became apparent that using react testing library's fireEvent doesn't effectively test filling in the form as if you were a user, due to the fact you can disable the form fields and the test would still pass.

It is important our tests are reliable, as this enables us to have an instant release cycle as opposed to other places which have sprints with manual regression tests every couple of weeks.

This is because there is a  difference between these two methods that may appear to do the same thing, but with a subtle difference under the hood.

We are using fireEvent methods to fill in the form, when perhaps instead we should actually be using userEvent. userEvent is built on top of fireEvent, but the primary benefit is that it better simulates the way a user interacts with a form. For example, consider the below implementations.

The fireEvent.change will simply trigger a change event on the input, whereas the userEvent.type call will trigger keyDown, keyPress and keyUp events for each character. As a result, this implementation is much more like actual user behaviour.