Skip to main content

Testing React loader with React Testing Library

 I have came across this situation so many times where I need to write a unit test for a component pattern I have developed so many times that I can write the code with my eyes closed.

BUT what about unit testing!

That's something my mind thought is the best candidate to get rid of in order to store more cat memes.

Even when these patterns are used almost everywhere and we write the tests for each one of them (I hope you do) but still we (it can't be just me) tend to forget them and get even more confused with those pesky `act` warnings.

So I decided to curate a recipe book for some common unit tests which I come across and might be useful for future me. Happy to share the github repo and also would love to see if anyone has more such common unit testing patterns which they can add or suggest.

https://github.com/Charchit26/react-testing-library-recipes

Now, let's talk about the one I have coded a dozen times and still take half an hour to struggle with its unit tests - Loader icon while an API call is being made.

This specific example can be found here.

Here I need to render a Loading icon/text for the time being an API call is being made and once it resolves then replace the icon with something else.

Let's start with out React component under test - LoaderWithAPICall (I know such a thoughtful name!)

Now we start with out first test - it should show the loading icon initially.

I am mocking the API call upfront as I know it will be called on every render and if you have got an expensive or external API call hooked up, you don't really want to keep calling it in the tests.


This will test if the `Loading...` text is available as soon as we render the component.

Here, we had to add a ``waitFor` to get rid of the `act` warnings.

If you're being troubled by the ghosts of act again and again you might need a dose of this beautiful blogpost - https://davidwcai.medium.com/react-testing-library-and-the-not-wrapped-in-act-errors-491a5629193b
Thanks David!

Now, let's go a step further and test if the API call was made and if it was then does it change the text on the screen.


Pretty simple, right?

This should be able to give you a good idea to start with such common unit testing patterns.
And again, if you can think of something else which you see in react tests very usually please fele free to raise a pull request.

Let's end with a programming meme ;P



Labels:

Comments

Post a Comment

Popular posts from this blog

Recipe for chaos in an XP team

Our team failed! We failed in delivering value to the client, value to our users as well as we failed in showing the benefits of XP - eXtreme Programming to not only other teams but our managers as well. So here I am listing some of the factors which I think lead to the fall of the project, the practices and eventually the team itself. We were quite fine an year ago. We used to pair, practice TDD, interview users frequently and release awesome features to production almost weekly. I would not go to the extent of saying we were living in perfect times, since we faced some very common problems - Some people felt that TDD made them slow. Management kept questioning whether pair programming is really "fast enough" and not slowing us down. This gave birth to some "Duct Tape Programmers" in the team. (That's a real term! Google it.) "The Duct Tape Programmer is someone who is able to cobble together software that solves the immediate problem, but witho...
2 comments
Read more

Pair Programming - Is it really effective??

So, I have been working in a "strict" pair programming environment for about 5 months now and this is the first project of my career in which I have been subjected to sit with another person for the whole 8-9 hours of the day while I (or he) codes. Also I have been pairing remotely for half of those days (half of our team is at onshore). I learnt these practices and principles while working with another vendor for the same client in Sydney, Australia. Hence, I thought it will be a good idea to share my thoughts and experiences as well as point down the things which otherwise I have to re-iterate over and over for every person looking for advice from me before starting with this practice. Note: All the points that will be mentioned here going forward are from my own personal experience and specific to the project I worked in. Though I think most of the dev community who has worked in this setup would second my opinion. What is "pair programming"? Yo...
Post a Comment
Read more