Testing in React using Jest

hello and welcome today we're going to be looking at the basics of testing in react using jest the project we're going to be using for this video is the calculator app that I've done in a previous video if you have watched that video then great then you should be up to speed if not you can go ahead and watch it if you want to learn how to make the actual calculator it might give you a better understanding of some of the things that we're trying to test today as well however if you just want to skip to the testing part then we can also just clone the repository that we created in that video I'll leave a link to that repository in the description down below and if you go to that link then you can click on code and get the https URL to clone it and we're just going to be cloning that into our local directory and then I'm going to do git clone and this will be the tutorial so there we go I've cloned it down and then now I'm going to open it up in Visual Studio code now we've got the project open in Visual Studio code and if I go ahead and open up the terminal in here so that we can run a yarn so this will install all the packages that we need for this project so and let's just do a yarn start and I'll show you guys the application that we're actually going to be working on today if you haven't seen it already it's just a basic calculator app and as you can see you know we can do some basic operations on it um we have a clear function um we can do multiply and so on uh all the functionality that you would expect to find in a calculator and we're going to much more detail about how to create this in the previous video so if you do if you're interested in then go and check it out so today what we want to do is switch to the branch that has no tests in it so the main branch will already contain the test as I've already committed them but let's just check out the node tests branch so now if we go to this file we can see that there is a test set up in here where does equal button um but we won't be using that today we're just going to be starting from scratch so I'm just going to save that and let's go ahead and make a start on our writing our first test so in this application we already have the test file set up this is given to us when we use the create react app so we haven't had to do any additional setup for the tests these files were already in here so what we want to do is first Define a describe tag which will be just done like this and we can enter in a name that will describe our suite of tests um so we're just going to call it calculate uh app yes as we're going to be doing all of our tests within this file we were testing multiple different components we could give this a um a name of like that specific component for example if we were writing a test specifically for grid button grid digit button we could say describe grid digit button component but for now we're just going to use this and then in the second parameter you want to just Define the function and this will contain all of your tests and the way you define a test is either by doing test um following the same pattern as you would really described so we'll give the the test a name so let's just call the first test renders calculator and then in this test we will check that it actually renders all the components that we want it to render the other way you could also do is uh doing it which is just shorthand for the test keyword so but we'll just continue using that and then in here what we want to do um actually let's just go ahead and run that right now um if we do yarn test we can see that this will now run a watcher that is watching our test files and and watching all the updates that we do uh there are a few different things you can do in here if you have a large project for example you could press p and then give the specific file that you want to run so you don't have to run all of your tests at once but in our case we only have one file so we're just going to leave it like this for now and as you can see it's passing we're not actually testing anything so it's not expecting anything to fail um and then in here what we can do is do render and then we want to render our actual app component so like this and this is the same thing that we are rendering inside our index.tsx as you can see here as you can see I'm not bothering with rendering all these other things because I'm not going to be testing them if I were going to test the theme properties in this application then I would include this inside my render here so now if I go ahead and just save that we can see that it will run and the test will render this and um it doesn't show us anything but it's the test Runner is running that and able to inspect all of its elements and what we will then do is basically tap into those elements and assert that things are the way they're supposed to be so the first things first actually what we should do is um in this app I want to check that this output is being displayed so this is the the value that's being updated in our app so what I'll do is um I want to define a data test ID on this container where we display the value so what we'll do is in here we will Define data Dash test ID equals and then we'll give it a name something like output and if we save that our output container should now contain a data test ID if we want to inspect this as we go along it's useful to know how this works because you need to inspect element a lot when you're testing just so that you know exactly what element you're selecting to test so as you can see here this div is now also displaying a data test ID property on the tag so now we should be able to access that within our test so let's go ahead and Define the output element and what we'll do is do screen dot get by test ID as you can see as I was doing that there's loads of different selectors that you can use and there are different ways of actually getting those elements from the Dom and so in here we're just going to be doing get by test ID output this is by far the easiest way to get an element as you can specifically put on the element that you want the exact ID that you want to get in the test um so in here I've I've now selected this output div and put that element into this variable and then what I want to do is just do expect output I could do to be visible and then this will just check that this element is actually visible when the test runs but I want to take this a little bit further and say rather than just it being visible I want it to say to have text content of zero so this will check that this div has text content of zero and if I change this to 10 for example you'll see that this should Now fail because it's expecting it to be 10 but it's actually zero and here you can see these are quite useful to look at when your test fails because it tells you this test field and expected to have text content of 10 but it received zero and it tells you where in your test it failed so let's change that back to zero I'm going to Define buttons now to try and get all of the buttons of the calculator and the way we'll do that is it is screen dot get all by Raw so now we're trying to get all of the rows in the screen um that all the elements in the screen that has a roll of button so that should this should give us every single button that's that's being rendered so in this app I know as I've calculated that before we have 19 different buttons so one test that I can do to Simply check that all of these buttons is being rendered I can do expect buttons dot length to be 19. and then when this runs it should be able to find that there are 19 buttons and now if I want to test specifically all of the number buttons to actually be there what I'll do is I'll do a for Loop just do all Loop Visual Studio card didn't want to help me out that's fine I'll write it out myself I equals zero I is less than nine so we get all about numbers all the numbers in there I plus plus and then in here what we'll do is we'll expect so expect is the assertion and then we'll do screen dot get by roll this time instead of get all by roll we're getting one specific button by row and in here I'm going to do button and then I'll say the specific name of the item that I want to get and all I'm going to do is do a string interpolation of I which will get that specific number and then I'll just do a check in here so to see that it's in the document all I could do to be invisible but this is a different way of doing it so now when I run that you can see that has worked if I change this to 10 and it tries to look for a button with a number 10 on it that also works 15 okay so somehow it's found the number 10 okay no it did fail at 10. um could not find with roll button and name pen so yeah there you go and I also want to check that all of these other buttons are also in here so I have a snippet from earlier which I will just paste in like this here I'm doing the same thing as I'm doing here with button but I'm specifically putting in the symbols and text that I want to test and if I now save that you can see that that passes so I could have also done something like this where I break it out into a another variable and then assert on that later on but that's only needed if you're going to be using it multiple times um I just did this here to show you guys that you can do this most of the time you're only going to be testing it once so you can just put your um selector inside the expect just like that so actually I've realized what's wrong with the space of bird here it's because within zero to eight because this is less than nine that's why ten was working earlier because it actually is um checking up or up until nine when we have it as 10 so actually the correct code should be like this and that should still work um so just to talk about what this expect is expect is a function that comes out of just and it takes in an element or a selector something that selects an element on the page and out of that you can do different types of researchers on it like tubing document to be 19 [Music] um and a lot of different other stuff as well so if I give you an example here we did Dot you can see here this is all the different types of assertions you can do and you can even do uh to have style um to have Focus to have error message and so on so depending on what you want to test you can test different things okay so now that we can we've proved that we can render the app and that's been tested let's move on to our next test so for the next dashboard we'll test is that it can do some functionality so let's do the addition functionality and we'll just call this test does addition correctly so what we'll do in here we'll render the app again now what we want to do is actually trigger events by the user so in order to do this we need to import one more thing from testing Library react and that is by a event so what we can do is use fire event to trigger a certain user events in the test so here I'll trigger is a click and we want to try and click on a button so I need to use a selector to find the button to get by Raw and also button followed by the name and let's just go with something simple we'll smooth up the addition is working so now that I've selected this button I've clicked on number one and the next thing I want to do is let's just click on number zero which will make 10 and then we can click on the plus button followed by the number five and then we'll hit the equals button so now what we should expect the output to be is five so if I do this myself here if I do one zero there's a problem in Market as this should be zero one zero plus five equals fifteen so I should be able to use this code here to assert that that output of this is 15. and I don't actually need this whole bit of code to be in another variable so I can get rid of it I just need to change this to 15. and we should see the addition being worked correctly there has been some some sort of logs left in there so let me just go ahead and remove these from our development so it doesn't pull you all exists there you go it does the addition correctly if this was any other number this should fail as you can see expected 16 received 15. so that proves that our code works so now you can see that we're starting to build up a pattern of the things that we're testing we know all the different types of functionality that this application should do and that's what we should try and Tackle so for the calculator we can carry on um testing the different types of functionality so the next one I'd like to do is do subtraction and in this case we'll just change this to a minus and the output should now be five instead so if I go and save that that's another one working so now let's do it again and test the multiply function and change the minus to multiply and this time the result should be 50. the process again now under the next one and as you can see this is like a very easy thing for us to test um because a calculator is a very simple application but it can get very complicated okay so the Divide I need to copy because I don't have a divide symbol uh it should give us value of 2 and there you go we've tested all the basic functionality of the calculator app by doing these so we can even take this further to um to test the other buttons so that we completely cover all of our functionality in our unit tests so the first one maybe we can do is um to do the clear button so I'm just copy and paste this test again and uh which is just it does clear correctly and instead of these two what we'll do is this one we'll call we'll click on this C button and after it types in and the user clicks on C it should clear it and it should bring the value back to zero so if we save that um there we go that's now passed um let's move on to the next function which is let me just bring it up so let's work on the AC so okay roll functionality now um so this does AC directly I guess we could school it up um so in order to test this we have to do one Value Plus something else so let's get the plus one so we'll do that right in screen dot getby roll so that should give us the plus button and then after we do this we can do fire event dot click on plus button just like that and then let's click on another number here so maybe we click on two and then what actually what we should be able to see is if we do this 10 Plus two we should see that this button is highlighted in white as is showing you what you've got selected um which the AC will clear so what we can also do here is assert that this style has been applied so the way we can do that is if we do expect plus button dot two half Style and then in here we can give the style property which is I guess border color of because so that should have um a style of white and then we can actually go ahead and just click on the AC button and as you can see in here if we click on the AC button in here it clears the value and also clears um the operation that's selected so now the output should be set to zero and actually this should not have this style anymore so what we can also do is have a negative on any of these assertions that we do if we just put a dot not in bit in front of it and it will evaluate the negative effect of that so if we go ahead and save that now we should see that that works since we've done something different here I just want to prove to you if we do change this color to something else this should also fail because it won't actually have that border collar on that button as you can see here this style hasn't been matched I'll just revert that back to where it was before save it and now we've tested the AC functionality um the last thing I kind of want to test is this chaining um functionality so when we do 10 plus 10 Plus it turns into 20 and then we can continue plus it goes into 30 plus 10 equals 4E and so on so that's the last thing that's a bit more of a complicated test but we can test that as well so let me copy one of these tests again and we'll start from here because this is a good base for us and let's just do does chain operations correctly um this time I think I will use output stored in a variable as I can test this a few times um so what I can do is start off with 10 plus 5 and then we won't do an equals but what we can do is expect output um do you have text content of five as at this point if you click 10 plus 5 is content will be five and then if we just hit that plus button again this text content should now change to 15 as if it's been um equaled and then let's Carry On by adding in some more values so it's click on one zero again and then do text content should now be 10 as we've entered in 10 into the application so if I start off with 10 plus 5 I'm now on five effective plus again it's equal to 15 but if I enter in one zero it's on ten but now if I click equals then it should now equal 25. like this and I'll just remove this and change it with output it wasn't able to find yeah so I get this same mistake again keep writing 10 instead of zero we're typing 10 by pressing two different buttons not just typing it out and cool there you go we've tested majority of the functionality we could also go ahead and test this but I think you get the idea we're testing all the different functionality inside the app and this is the you can do the kind of stuff you can you can cover so this has been a brief intro into using just with react uh one more thing I would like to just show you is the before each hook so we can use this as a hook that will run before each app so if we have certain things that we're running on every single test we don't need to keep writing it in every single test itself so for example the render of the application we can just do that once in this before we took and then it will happen every single time in the test so now we can actually remove all of this is just simplify our code down a little bit I'll just go ahead and remove these and I can see they don't need to have the render app on every single test and it will still work as you'd expect it to just like that so that's it for today if you guys enjoyed this video then give it a thumbs up if you have any questions anything you're stuck with anything you want me to go into further detail on or make a video about in the future then just let me know in the comment section down below or even if you just have any questions or get stuck by doing this I'll be happy to try and help you I hope this has helped you in some way I appreciate your time and I'll see you next one

Channel: ridhwanio

Views: 1,013

Keywords: Test, Jest, React, Unit, Integration, beginners, coding, programming, learn, course, typescript, javascript

Id: GglVWDcUKOo

Length: 27min 39sec (1659 seconds)

Published: Sat Feb 04 2023