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

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

Send Anonymous Mails!

Ever thought of a mischievous act like sending a mail with  a fake identity or using someone else's identity?? Sure, if you have that naughty prankster hidden in you! So there are ACTUALLY two common sites which may help you in such pranks.. They are... 1: http://www.sendanonymousemail.net/ Its got a pretty easy and user-friendly interface which makes it so special.. 2:   https://emkei.cz/ It can be considered as the advanced version for sending fake mails.. Its got a good variety of options for "geeks" as well as an html editor for cutomizing the mails! But Do Remember that  these tools would let you   send anonymous emails   free of cost   and let you be  hidden   at the same time, but they Do store your IP addresses, just in case your anonymous email indulges in illegal activities! So, Do NOT even try to send scary threats or spam like messages because you may get caught very easily and can be charged with fr...
Post a Comment
Read more