React unit testing with Jest & React-testing-library

ladies and gentlemen today we're gonna talk about unit testing in react using just and react testing library nowadays if you are a react developer you are responsible for testing your own code especially writing any test that's a pretty much requirement in pretty much any company nowadays so it's very important to learn unit testing and just is probably obvious choice because it's developed by Facebook who's also responsible for react and react testing library is something new previously a lot of people you're using enzyme which is also good but react testing library is bit more simpler let's look at how it works and welcome to tech see tutorials [Music] we are going to create a very simple component and try to test it so I've created a as usual a project using create react app and as I mentioned before that create react app is loaded with just and other good stuff so we're gonna use that so you don't have to configure just here at the moment however there some other libraries that you need to install so let's install all of them in one shot so I would say npm install the first library we're gonna install is react testing library which is testing library slash react then the react - test - render and the next one would be just don't and I would save it as a dev dependency so it's a save - def because we want this to be part of their dependency is not part of the project the functionality it's just helping us test the code so it should go in a dev dependency okay now that is installed let's create a simple component that we can attest so I'm going to create a folder called component components and within that I will create another folder call button and the reason for creating this particular is each folder would contain its component so one component per folder so that we can not only have component in there we can have its CSS and also its test within that component so let's create button jeaious and as I said this would be a very simple component so let's quickly build this so import react from react function button and we're gonna export this button so export default button so what's the functionality this button provide so it's a simple div so I would say return div and the label of this div would be label and obviously this is passed using props so we can actually do this when we are building this label we need to add few other things one of the things we need is data test ID equal to let's call it button and the reason for this is whenever you test something let's say there are multiple elements here and we want to access one of the elements you can use IDs regular IDs but they're quite bad because you may be using IDs for the functionality of the project right let's say some developer comes and change the name of the ID and now all your tests are broken so in order to differentiate between your regular IDs and the IDs that are used for testing this is the best way this is called data test ID and data is actually a special attribute of HTML you can go and check it out more about it okay so now I can use this inside my app component so I would say import button from so this would be inside the components inside the button inside there's a button yes and I can use it here and here I would pass that prop remember this button has a prop call label so it's a label equal to click me please okay so the component is render let's add some style and the reason to add style is with the gist you can also test the visual part of it as well and we're going to look at it in detail so we need to add some style so let's add class name let's call it button style so we need to create here with the button is we're gonna create button dot CSS and the CSS would have obviously button - style okay so we need to give it a border a little bit and maybe some margin so let's first add this button dot CSS in our button yes so I would say inside the button dot J s I would say import button dot CSS you can provide a relative path and now inside the button dot CSS we can say border is one pixel solid and three okay so I have some border five pixel let's add it make it 10 pixels okay so now the button looks reasonably good the there was the no need fried but I just wanted to make it nicer okay so now we are ready to test this button the best place to add the test would be inside the button and here I can create another folder and the way I would name it is test underscore underscore test underscore underscore okay and inside this test folder I would have same name as the component so button dot then test Jia's and the way it works is when I run the test it would go through all the components and it would look for this signature test GS so if I have dot test dot it would run all of those files so make sure that you name your test file in this format okay so how do we test this so first we need to import react as usual from react then we need to import also for the act dome since we need to render stuff from react dome and then we need to import the component that we are testing so I would say import button from and this is one level up right so you would do this so first we want to do is we want to make sure this component renders as it is okay you would say it renders without crashing it means the component and I would write a callback function inside and here I would ah right my test so let's do this Const Dave so create a div using document dot create a limit this is all normal JavaScript so we're gonna create a div and then we're gonna try to render the div attach our component to that div so I can say react Dom dot render and so react tome is this library that we used and we can use the button so we render this button on this dome element that we just created to render it at div element okay so now I can run this test so I could say npm and test when i run this it would run all the just tests basically this you would look for all the test files and it would execute okay so it passed two tests since we only written one test where why did it pass two tests well if you look at the when the create react app creates our app it already preloaded with one test which is app dot test rjs and you it has exactly the same kind of tests it says it creates the app component and loads using the react dome it also tries to unmount the component to see if it unmount it as well so we created the same test for buttons that's why it says two tests have passed and if I keep it running like this so anytime I make any changes it will automatically watch for any changes any would run so you don't have to read on the tests so let's try it right our second test which because it's related to button we're gonna just write in here so I can say it renders button correctly and it would have callback function so here we're gonna use this react testing library that we just installed so I would need to get that so I would say import render from act react testing library react okay so this render is different from the react dome render react dome dot render is a part of the the react library and this is different so here we're gonna use that render function and we're gonna do the same thing try to render the button and this time we are going to pass the prop remember a button has a one prop that we need to pass call label so we can pass that and we can say click me please and when this renders we can get multiple things from this so one of the things we can get is remember we added the data test ID here so we need to access this element using data test ID so this returns a function called get by test ID so we can use this get by test ID and then pass the test ID which is nothing but the button and then we can have expect so for that we would need something else we would need to have import we also installed this just dome which has a stand expect just need to type this and here we would wrap this with expect reacts we can type multiple things here so we are expecting to have text content and that would be the same as because when I render this button when this button gets render whichever label I pass would be the label of the button right so I passed click me please label so that should be inside that label so what I'm saying if I get this button by this data test ID then it should have this click me please because that's how I rendered it it's actually fails because I misspelled it label okay okay so now it passes so now there are three tests and there passes since everything is passing you don't have much to do here now here I pass click me please what if you want to render something else by passing a different label let's say if I want to plot pass make this as a what if I pass save would this have save inside if I want to look at this then I would well this should be rendered okay so now it's failing because it sayings found multiple element by data test ID button but since our button only has one element how can this have multiple and that is because if I look at it it's actually showing you what it renders when it does that and I can see there multiple there's a one div which has the button style and it says click me please and the second one has safe that means that this button tests both of these I render at the same time and it's adding to the the Dome tree which is quite bad so what you want to do is you want every after every single test we you want to clean up so that all the residue won't be left so I can have multiple different kind of tests so for that I can borrow clean up function from testing library so to clean up and in the beginning of the whole thing I would say after each clean up when I do that then that error won't happen now I can actually both would pass because here I'm passing save so it should have save inside just in case if I want to do it then that next test we're gonna do is called snapshot testing I'm I'm sure you have heard of it it's pretty important to learn because it's pretty cool so for that we need to import a few things and we already installed it so all I have to do is import another renderer so I would say render or it seems like they're running out the name so they just don't want the same name to be here so they said render and sort of render ok from we need to get it from react test render and here I would say it matches snapshot it matches snapshot what does it really mean I will find out in a minute so now let's use that renderer and dot create we're going to create a snapshot the same way that we did we will have a button and we can pass the label called save and then once the the the dome is created we want to convert this into JSON so we say to Jason so this would convert this into like a virtual dome object and we can save this and style inside an object called tree okay so now I've created an object and I have saved it into this tree then I would say expect tree to match snapshot so what does this really mean so what happens is that when it creates a tree and whenever I run this statement to match a snapshot it goes and looks at the folder structure and look for a folder called snapshot and inside there there should be a file call button dot snapshot but right now it's not there so it will create one so first time when you run this it will create a file it will create a folder and inside it would create a snapshot and it would dump the entire Jason in there so let's run this so if I save this you would see that there were your folder that is created okay so within the test folder I created a folder call snapshot and if I look at the file name its button dot SJS start snap if I look inside it actually took the component because I'm passing save and it actually rendered the entire component here so it saved the snapshot so why this is useful so what you want to do is by default it would do this whenever you commit your code when you when you push your code to your branch it would also track not only test it will also track snapshots so you will commit all the code and next time let's say if I change something so here let's say inside the button I'm gonna change something I'm gonna say I'm gonna pan something to the label every time and when I do that the my button Tesh fear right because it has created this snapshot which has save inside I haven't changed the definition of the test here so it would create a snapshot which would not match the original snapshot it created and then it would give you an error so let's save this and let's see what happens so as you can see when it renders it says hi click me please so it added that hi extra hi and now the test fails because it says snapshots matches snapshot 1 and has failed there is a you'll see what exactly is failing it says there is an extra high here that was added and the red means it's failing you're given a choice now let's say if you if you intentionally changed made it made this change and your tests are failing now so you can do something you can say ok I know this is a right change so update my snapshot so I would say W and it would say it would have all the usage run the test again f2 run only failed test or you to update failing snapshot so I would just say you and it would update my snapshot so if I go and then pass a test so now my requirement is actually matching the code that I've written so if I go inside here I would see hi safe so it has saved my snapshot let's say if this is not a change that you wanted to make you accidentally did it or somebody did it without thinking then the snapshot fail and you can when this would show up during doing a review of your code and whoever is reviewing can see this and say hey look this is not this is a bad change you need to fix it so you need to fix it don't update the snapshot just let it fail and then do you do the code or undo the code and then it should pass it then it would match the original snapshot file and I can save actually multiple snapshots so let's save it again here and then I can say snapshot one of the same components snapshot too because I can have multiple props where I can pass combination of things and see if it renders correctly so here I'm passing save here I'm gonna say click me please and save it now it will create another snapshot but within the same file so it says snapshot is obsolete because because I updated it it's not saying that it's failing because previously snapshot still is fine but now additionally step shot so it actually created another one so here I have a higher high save now it says I collect me please but it has a two entry of high safe because of this so I need to update it so I would just say W here and then press you to update the snapshot and now it updates it and now it passes everything and I have to snapshot one for high save and one for high click me please [Music]

Channel: techsith

Views: 216,892

Rating: 4.7378516 out of 5

Keywords: reactjs, jest, unti testing, react testing library, react, testing, unit testing, unit test, enzyme

Id: 3e1GHCA3GP0

Length: 23min 49sec (1429 seconds)

Published: Mon Oct 07 2019