Testing components that use React Query
When the React Testing Library was first introduced, it was under a main guiding principle that changed how we wrote tests going forward. That guiding principle is, “The more your tests resemble the way your software is used, the more confidence they can give you” (https://testing-library.com/docs/guiding-principles/).
From that point on, many things changed in our tests. Focusing on a user-centric approach meant avoiding implementation details in our tests at all costs. This meant no more shallow rendering, no more state and prop references, and a more user-centric way of querying the DOM.
Reading the last paragraph, you might be wondering how to test your components following a user-centric approach. Well, the answer is straightforward – a user doesn’t have to know the page they are using leverages React Query. If you write your tests like you are just using the page, this means that you will find issues that...
