Testing In React Tutorial - Jest and React Testing Library

hey guys how's it going i'm back here with another video and today i decided to bring this video which is going to be me explaining to you guys how testing works in react um in a very short amount of time because i feel like a lot of people get confused in the beginning and for that reason i wanted to try to simplify testing as much as i can because it is simple um you just got to understand what you're supposed to do and what you're supposed to test so for that reason i decided to bring this video and before we get into the video if you could leave a like and subscribe i would massively appreciate it it would help support my channel and bring more people to my channel which i would be very grateful for if you could do that and yeah that's basically it let's get into the video [Music] [Applause] [Music] [Applause] okay everyone so in order to show you guys how to test and react we're going to be testing a specific component that has a lot of different parts to it so the component is actually called a counter you'll see over here um it's this component over here it's very simple it's just a counter app and i chose this one because it despite it being a simple app which is just a count it's actually pretty interesting to test because it introduces a lot of different topics that you you need to understand when testing so i thought it would be a good idea to use this as an example so you can see our our component is pretty simple it's just called counter and it's just a component that it creates a state called count which starts with an initial count which comes from a prop but usually you can start from zero whatever you want but basically it starts with that value and then we have a couple buttons over here that does some stuff to that count right so we have a button that calls this function called increment which increments the value of the account so it increases the state we have one which decrements it decreases the value one that restarts meaning it just sets the number to zero and then one which kind of just switches signs uh it just if it's negative it becomes positive if it's positive it becomes negative and this is the app right here right very simple we can just click on the button it will keep increasing if we click on decrement it will decrease can restart we can switch the signs become negative become positive whatever we want so this app is simple but it serves as a good example to explain how to test so why would we want to test this well because there's different aspects of the component that depend on how the user is interacting with the component so what do i mean by that well this text over here it should change right it's displaying the account so it should change depending on what the user does with the buttons right so this would be a good thing to test because sometimes and i swear this happens a lot um we as a developer we think we our code makes sense we think our code works but when you deploy the code trust me when i say that millions of people will try to will use this code or your product in millions of different ways which eventually one of the ways they use it will cause issues so you want to be testing all the edge cases so that you're really sure that what you wrote covers every possible use case so unit testing is important because in some sense it takes more time for you to go ahead and write a test for this component when you're done with it right but at the same time if there's an issue with it which again it happens a lot um you won't have to come back and debug everything because you found the issue before you even um deploy the the application right so testing is important for that reason so how would i test a component like this in react well you might expect that in react when you install or you do a create react app you see this file over here which is called setup tests this file its main purpose is just to import as you can see just dom which will allow us to use a lot of different interesting functions when we're trying to test um you'll see it is really important so uh it's nice that it already comes with uh the create react app boilerplate um now usually it also comes with a test file called app.test.js but what i want to do is uh whenever you have a new test you want to write what you do is you just create a file with the name of of of the file so counter and then dot test.js this is a common practice for this right you don't have to do it exactly this way i always recommend grouping your files your testing files with your normal files um together in a folder or something like that but it is important that they're next to each other so that when you're testing you can look at the other file and also it makes your code more organized so over here inside of our counter.test.js we want to start by importing our counter component over here now whenever we're testing a component we import it because what we want to say is each test or each test file that you create should represent a test for a specific component and what you're doing is you're describing all the different stuff that can happen to that component so one way to write tests and react would be to first say you're describing the counter component like this now if you don't know what the describe function is it's just one of the ways to um to start a test and and react in in in javascript in general as well um you can use other ways you can use tests like this i recommend trying out every possible way to test i'm going to link some resources in the description of some articles explaining best practices when testing and everything like that because it is a everyone tests differently as long as you're covering your code and your your testing effectively then that's fine but everyone write tests in a different way this is how i write tests and i feel like it's a good way to do it so what you do first is you describe this component right so you write it describe and inside of here is where you put all of the individual tests that can happen with this component now how do you write an individual test well you use the it's function because you're describing this component and what you're describing is you put over here so what do i want to describe for the counter component well the first thing i want to test is first of all we this counter component over here has an initial count right it's just a prop that we pass wherever we call it we can make it five and then um you'll see that if i refresh the page it starts at five instead of zero i set it as zero because it makes more sense but what i want to test initially is if i render this component and pass five or six as the initial count will this be displayed this is important because we're testing how the component is handling its props right so we could do something like this we could say um counter displace correct initial um count or something like this right you this message some people will complain i know uh of how i described this but honestly write whatever makes sense to you and write exactly what is happening in this test so what i'm going to do in this test is i'm going to test to see if it is displaying the correct count so i'll just come over here and i'm going to just put a callback function that will describe what action will occur inside of this test um so basically whenever we're describing an actual test right so whenever we are instantiating our component creating a creating a test version of our component and testing to see if all of the stuff that we want to test actually works we need to use a function from the react testing library called the render function so i'm going to say const over here i'm going to open and close curly braces i'm going to set it equal to render and it will automatically import over here as you can see now this render function it serves to render a kind of a fake version of your component inside of it you'll just put the component that you want to test you can input over here all the props that you want to initiate this component with that are going to be useful for this specific test so i'm going to initiate this with the value 0 right and then what i want to do is i want to grab some stuff directly from this new version of our component what are some stuff you can actually grab from it one of the things we can get is a function that will serve for us to find elements inside of our component so if i want to test to see if this number over here is equal to 5 right the way i do this is i need to query this specific element inside of here and there's many different ways to get this element or query this element and the different ways are represented by different functions that you can get directly from this render function over here so for example if you write get over here you'll see all the different functions that you can use to find an element you can get an element by its text you can get it by its title its row its display value so many different ways and it's also an important distinction that you can use a query as well now the difference between get and query is that if i try to get for example an element a button from my component if there's no buttons in my component it will fail my test now there are some cases in which we don't want that to happen for example if we have a condition where sometimes it should show the button and sometimes it shouldn't show the button we want to be able to test the case in which it doesn't show the button so will we use the query in that case because it would just return null which means it our test should be working now in our case over here we want to use the get because there's no way there won't be any count inside of our app right it should really fail if there's no count so we'll get we're going to use the get type function now which of them are we're going to choose well there you should read the documentation to read each one of them i'm not going to go over each one of them individually i'm going to use some of them but not all but there's one over here which is the get by test id now all of the functions have a different version of them they have a version called all which is just in case you have multiple elements with the same um with similar identifiers but we're going to be using the normal which is get by test id and this function over here it serves for elements which are dynamically changing so in our case over here we have accounts that will be constantly changing its value so we wouldn't be able to grab by text because the text inside of this h3 tag will be changing consistently right the number is is changing so in this kind of situations we would be able to use the get by test id now this is a very easy one to use because all you have to do is you just have to come over here to the element you want to get you say data test id like this and you just pass a value right for example i can say count and then over here if i want to grab whatever is inside of here i can just say const for example count value is equal to get by test id and pass count over here now the thing is you shouldn't overuse this you should only use data task id for situations like this in which there's no other way to get this individual value but in this case it is useful so that's why we're using it and what we want to test in this specific test is if um whatever value we passed as a prop over here will actually be displayed inside of this um h3 tag which is now represented by this little thing over here now this is not the actual value what this is is just whatever it's just the h3 tag to access the value we would have to say something like get by test id dot text content or or whatever you can access so many things of the actual dom element right so we're just accessing whatever is inside of this element and also it is important to recognize that this will come out as a string so if we were to actually test to see if this is equal to 0 all we have to do is we have to formulate our test as follow we should say that we expect something to happen and then we say what would we expect it to to be right so we can say we expect it to be something or we can say expect it to equal something there's like so many different functions that you can use you can say to have length if it is an array and you want to test to see if the length of that array is correct there's many different functions you can use but the important part is this one over here where you just start by saying you expect something to happen so what do we expect to happen we expect that the count value over here is equal to zero because this is the initial count we pass now how would we test this over here well if you want to run your test in react there's a script automatically implemented which allows you to just run yarn test and in in your terminal and it will start running all of your tests and whenever you make any changes to your tests it will automatically update and run the tests again now you see i failed one of the tests and this is an important thing i wanted to say this or this shows over here issues that our app can have right because initially our thing over here we're testing to see if it is equal to zero but the content we get from the element is not a number and zero is a number so this minor stuff is important to test because sometimes you think something is a specific type and it usually sometimes it's not so in our case over here how would we make this work well we could just convert this number or this text we get from the element into a number and now our test will pass because now we're comparing two numbers instead of a number and a string so this is great we just wrote our first test which is amazing so what do we do now well we just write more and more tests so we tested just an initial um count right like whatever it is when we render the component now let's test to see what happens if you click on one of the buttons more specifically let's test the increment button so what description would i write over here i would say counter or count should um increment by one if the increment button is clicked right obviously again uh the way you describe your tests by using multiple uh if you could actually use more describes if you want it's just a personal preference but in my case i'm just keeping it like this to keep it simple but our test in this case would just be if the account should increment by one if we click on the increment button now how would we run this well we could either change our initial account or not i'll just keep it as zero for simplicity reasons and this part over here should kind of remains this reaming the same right so what would we do now well in order to make a test that tests this function or this button over here the increment button would have to access this button now how would we do this well we we could just use one of the functions that i mentioned previously we won't use get by test id because we don't need it because the values inside of them are not incrementally changing like they're not changing that they're not dynamic right uh this button will always have increments inside of it or this button will always say decrement inside of it so one thing we can use is the get by row function so i'm going to say get by row and the get by row is kind of interesting to grab the button for increment we can say increment button set it equal to get by row and then inside of here i'll just put the specific row that um this button should represent now what is a row well it's just kind of like what element it is right this is a button so i'm going to say it is a button now we have multiple buttons inside of our application inside of our component so which one is it well we can specify by actually grabbing a name value over here and passing increment like this so what this should do is it should get the button with the like the element with the row button with a text inside of it saying increment which is this one over here which is great now what do we want to do with this button well we want to simulate a user clicking on it right so how would we do this well we can get something from the react using library called fire event and this fire event function over here is really interesting because what we can do with it is we can say fire event and we can emit any kind of user event that we can test right so we can test if they're drop dragging dropping um changing an input pressing their keys but more specifically we can test to see if they're clicking something or clicking a specific um element in our component which element well the button that we just got from here right if i put it right here it will simulate a click inside of that button and if our component is working right um a lot of stuff should change right first of all um our actual count should increase by one right so we're gonna grab this count value over here and we're gonna test to see if it is equal to one instead of zero um if we save it right here we'll see that it actually is which means um our test is working right we can test to see if it was zero before we clicked on the button by putting um this thing over here uh right above the the the time we click on the button testing if if it was zero before and then clicking on the button and testing if it became one um it fails because we need to actually uh grab the count value twice right so i'll say count value one because this is the first time we grab it before while it's zero and then i'll grab it again so i'm going to say count value two after you click the button and this are the two values we're going to use to test now you could just put this instead of creating a variable and putting this directly over here if you wanted to i prefer to do it this way it's preference but you can see the tests have passed okay so we were able to finish this test over here which is amazing what i'm going to do now is um i'm going to write the tests for um some of the other buttons and i'll be back in a second just to show you guys because it's going to get a little bit repetitive but i still want to go over all of them so you guys can get an idea of how a test file would look like so as you can see i created a bunch of other tests over here and i want to go over each of them so i created a test for each of these buttons over here we created the increment one before but now i added also a decrement one so for the decrement i just um changed the actual text over here i also um changed the button i changed the name of the button also just to show you guys what i was talking about not creating a variable you could just put this directly inside of the expect a lot of people do this and it would work as well so i just wanted to showcase to you guys and as you can see if we start the count as zero and we click on the decrement button it should become negative one after it right and this test passes as you can see all the tests that i wrote passes um so i just wanted to show you guys so for the restart button we do the exact same thing but we start with 50 we check to see if it's 50. we obviously get the restart button we click on it and now it should be zero because that's what the restart button should do so it should be zero if the restart button is clicked then finally we test the switch signs we start with 0 with 50 we click on the button and it should become negative 50. and as you know it all passes perfectly it's not just running empty tests as well if i were to change this to 49 obviously it would fail as you can see over here because it's not the correct unit test now why would we do this well because it is necessary trust me i don't like unit tests as well i hate writing them but they are necessary um i found myself having a lot of issues with components especially when you're working on big components and um unless you're trying you have a time crunch like a very tight time crunch on a project you're building it is important to do unit tests because it will save you a lot of time later on and it will prevent a lot of bugs in your final product so this is basically it for the video if you want to check out all of this code it will all be in the description um if you want to leave a like in the video i would massively appreciate it help support the channel and we're going massively i'm really really really happy with the progress the channel is is undertaking um i'm happy with the support that everyone is is giving me and just let me know any kind of video ideas you guys have if anything you guys want to watch and yeah that's basically it really hope you guys enjoyed it and i see you guys next time [Music] [Applause] [Music] [Applause] [Music] [Applause] you

Channel: PedroTech

Views: 45,712

Keywords: computer science, crud, css, javascript, learn reactjs, mysql, nodejs, react tutorial, reactjs, reactjs beginner, reactjs tutorial, typescript, react js crash course, react js, node js, express js, pedrotech, traversy media, traversymedia, clever programmer, tech with tim, freecodecamp, deved, pedro tech, react testing, react testing library, react testing library jest, react testing library tutorial, jest tutorial, unit testing react, how to test in react, react unit testing

Id: JBSUgDxICg8

Length: 21min 27sec (1287 seconds)

Published: Thu Jun 16 2022