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

Re-usability vs Readability

Recently while developing some features for a client's React app I faced this dilemma: What to prefer over another - Readability or Re-usability. My first reaction to it was what any other great developer in the history of web applications would have done - "Google it out". I found some good articles and blogs around it but still I had my doubts, since at many such places the examples used were heavily dependent on the individual's situation. So, my next move was to consult a peer or another dev from the community whom I trust, and who is better to trust then random people on twitter! I would admit that I did not expect some of those answers but it really taught me one most important thing in software development - "Everything is situational". In other words, I was introduced to "anti-patterns" in real life! Good read for the difference between patterns and anti-patterns . <*Insert a funny gif related to anti-patterns here(if you find one...
Post a Comment
Read more

Download Youtube videos right from your Terminal or Command Prompt

I am sure that everyone of you had a moment in your life where you googled for "Download YouTube Videos" and may have got yourself victimized by some trials which become a pain when they start "requesting" for money. Right? Here I am referring a nice and easy tool to download those videos - youtube-dl. Its an open source tool with a very good team at support at their IRC server. First download youtube-dl: sudo apt-get install youtube-dl OR download the .exe counterpart for windows from  http://rg3.github.io/youtube-dl/ Then go to YouTube and grab the address of the video that you want. Once copied, type this in terminal or cmd to start downloading: youtube-dl  (paste the address here) Example: youtube-dl  https://www.youtube.com/watch?v=AbC12Aetc After it's finished downloading, check your Home folder, it should be there. The file name is usually the same as the address i.e. V2y92H2kiIM.mp4 By adding the -f option after the link in terminal or ...
Post a Comment
Read more