fix: improve tests

[ramniel]

With the help of @jcamposmk, consulting the documentation of the react testing library and analyzing some articles about the author of the library, we found some recommendations on tests, which may be useful. We would like to know your opinions on this.

• There is no need to call the cleanup function as it is called automatically for Jest and other test frameworks.

• The use of screen is recommended:
  The benefit of using screen is you no longer need to keep the render call destructure up-to-date as you add/remove the queries you need. You only need to type screen. and let your editor's magic autocomplete take care of the rest.

  *It seems like the returned object from the render function could be framework specific but the screen object will be framework agnostic, making your tests more resilient and consistent across projects.

• Wrapping things in act unnecessarily. Some queries and functions are already wrapped in act

• Use *byRole most of the time:
  There's not much you can't get with this (if you can't, it's possible your UI is inaccessible).
  Queries priority

• Do not use waitFor to wait for items that can be queried with find*
  (find* queries use waitFor under the hood)

• Do not put multiple assertions in a single waitFor callback
  By putting a single assertion, we can wait for the UI to settle to the state we want to assert on, and also fail faster if one of the assertions do end up failing.

• Use @testing-library/user-event
  Is a package that's built on top of fireEvent, but it provides several methods that resemble the user interactions more closely. It provides more advanced simulation of browser interactions than the built-in fireEvent method.

Common mistakes
Cheatsheet

Other changes:

• The data-testid attribute was added to the Loading component to obtain the component by this attribute and not by the name of the class. This way we make sure that the test keeps working no matter if the class name changes.
  In production: You can compile this attribute away with babel-plugin-react-remove-properties.

• The aria-label attribute was added to the form and the inputs fields to differentiate them by their role and accessibility name

Using aria-label attribute

[cbernat]

The changes seem reasonable, perhaps you could update this PR and merge it. And also be on the lookout for tests reviews to apply this way of doing thinks, from now on 😅

[andresmoschini]

🎉 This PR is included in version 1.217.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀