React Testing Library Tutorial #1 - Introduction

Key Takeaways

all right then gang so in this series you're going to learn all about react testing library and to teach you i brought on board lath harp who is an incredible teacher he's got his own youtube channel with loads of really good tutorials on typescript react aws mongodb etc he explains things really well so definitely check out his channel and subscribe the link to it is going to be down below in the video description anyway without further ado i'm going to hand you over to lathe [Music] hello everybody my name is leith harb a fellow youtuber and i will be teaching you about react testing library now before we begin i want to give a big thanks to the net ninja for reaching out to me and asking me to be a guest lecturer on his channel i'm extremely honored all right enough of that let's get in to it now before we actually start learning about react testing library and how we can utilize it to test our react application let's just go through some administrative work now in order to use react testing library in our react application well we need a react app up and running now to have a react app up and running we need to have node js installed on our local machine so if you don't have node.js installed very simple download just go to the node.js website and install the recommended foremost user's version right over here now to double check that you have it installed you can just go open up your terminal and simply do node v and if you get a version then yes you have nodejs installed on your local machine if you get something like node unknown node command unknown then you don't have node.js installed you probably made a mistake go ahead and try to re-install it so that is the first administrative work the next thing is git so we are going to be working with a pre-built react application that i have here on my github page and the reason for this is i really don't want to take the focus away from the react testing library side so i already have this pre-built react application and all we're going to be doing is focusing on testing this application now i do expect you to know a little bit of react if you are taking this crash course and the react application i have built is not very sophisticated and i believe it is very very easy to understand so i think that is all fine and dandy and i'll be going ahead and just explaining everything as i go so in order to follow along you would need to have the starter project so you need to clone this repo from my github repository and that is why you need get so if you don't have git just go to the git website and install it for your operating system similarly to check that you have git you can go ahead and just do get and then if you get this long command over here all this description then yes you have git installed if you get something like get unknown command then you don't have it installed and just go ahead and install it from here so let's actually just go ahead and clone this repo in case that you guys don't know how to do it so what i'm going to first say is that i have multiple branches here so i basically split up each lesson into multiple branches so if you ever feel stuck just check out into any one of these branches and see the code that i have written now if you want to follow along what you're going to have to do is clone this repo and check out into the starter project and let's actually go ahead and do that right now so go over here to code and then either do https or ssh if you have an ssh connection and then just click on this copy link over here and then go to your terminal i'm just going to do a quick clear and then move into whatever directory you want this folder to live in i'm just going to put it in my desktop so i'm going to cd into desktop and i'm going to do git clone and then well the link that i have that i copied from github now you can then also specify a name for the project if you want to you can call it rtl you can call it whatever if you don't specify a name then this will be the default name react testing library net ninja i'm just going to leave it like that because i actually already cloned this repo so once you execute this command you should move into that directory and you should see a folder that says react testing library ninja or whatever name that you provided so now what you can do actually is move into that directory so let me just get rid of all this so then you can move into that directory and then you need to install all of the dependencies so just do a quick npm install and then you should be able to install all of the dependencies for this react application now being that this is a react application this command might take two to three minutes to execute so i actually already did this beforehand but it might take you a little bit longer so you can go ahead and pause the video if you need to and then if you want to follow along then just check out into that starter branch so just do a get checkout and then 01 starter project so do it 01 starter project and then they'll be able now you'll be able to check out into that branch and then again i already did this i'm not going to do it again and then what you can do is an mpm start to start your application and if everything is all fine you should see this application on localhost 3000 so it is a very very simple to do application you can add a to do so go grocery shopping so let's just go grocery shopping and you can add this to do and you can see here that it updated to one task left if i added another to do like pet my cat you can see here that that also adds and you can see here now two tasks left and what i can also do is click on the to do or the task and you can see that i get this line over here and this kind of change in color and this also updates as well so this is a very simple react application but we are going to test it very thoroughly and we're going to really cover a lot of the react testing library concepts now this is a very special to do application because it really keeps you accountable in actually completing all your to-do's and how does it do that well it does that because you have a bunch of followers that are going to keep you accountable so you can basically click over here to the amount of followers and you can see all your followers now these aren't really your followers i just made an http request and i got a bunch of random users now the reason why i did this is because i want to show you how we can deal with http request with react testing library and as you can see if i refresh there's actually a period of time there's a little bit of a delay before the the users actually come in and that kind of asynchronicity can cause a lot of problems when actually testing your application and i want to show you how we can deal with it with react testing library so this is a very simple application and hopefully you got it up and running on localhost 3000 in the next sections we're going to be actually learning about react testing library and using our knowledge of react testing library to test this application so i'm super excited and i'll see you guys in the next sections