React Testing Library Tutorial #14 - Before &After Each

Key Takeaways

sometimes we would want to execute a piece of functionality before a test is ran and sometimes we want to execute some functionality after a test is ran and we can do that in react testing library through hooks now what we can do is specify a hook either in the top level or inside the describe block if we put it in the describe block it is only going to apply to the tests inside of that described block so if you want to really specify the test that should have this extra functionality before the test or after the test then what you're going to be doing is putting it inside of the describe block now in here what we can do is add the hook now what is the hook well if you do before you can see here that we have the before each hook and here what we can do is pass in a callback that is going to have all of the logic that we want to run so in here we can have console.log and then we can say running before each test so this is running before each test and just for the sake of uh just for the sake of this test let's just duplicate this over here so now we have three tests so i'm going to go ahead and save this and we should see a console.log so we see here that we have a scroll all the way up we have running before each test we have then our test being ran and then over here we have running before each test our test being ran running before each test our test being ran we also get this error that we can fix if we go to footers.list and provide an index so over here let's just provide a key that is an index just so we can get rid of this error all right so again if we go back over here we can clearly see running before each test running before each test running before each test but sometimes we want to run a piece of functionality once before every test well to do that what we have to do is go to our code and here we use not before each but before all and so this is only going to run once before each uh all the tests so over here we're gonna say runs running once before all tests so if we were to save this again let's go back to the terminal you can see here running once before the old test and then here running before each test running before each test running before each test now similarly to the before each and the before all we have some other hooks called after each and you can imagine what this is going to do so this is going to let's just console.log here running after each test again let's just do a quick look over here in terminal so we're running once that's the before each then we have running by each test or i meant i meant to say before here what am i doing before each test running before each test so here we have running once running before each test running after the test and then running before each test running after the test running before and then running after the last thing i want to talk about is the after all and this runs once after all of the tests have been successfully ran so let's just copy this and then over here running once or maybe ran once is probably a better description rand once and then after after all tests so probably get the gist of what this is going to do you can see here we have the before each we have the or sorry before all before each after each and then over here we have the after all so there's a lot of times where you might want to do this maybe we have a bunch of tests that have very very similar functionality and so what we could do is we can place that functionality in a before each hook similarly maybe we want to clean up our tests so we can maybe put that functionality in the after each hook all right so that pretty much concludes it and that pretty much concludes the lecture so thank you very much for uh taking this crash course with me i really appreciate it if you made it this far and hopefully you guys learned a lot with react testing library thank you so much to the net ninja for having me do this crash course hopefully i made you and your audience proud and i would love to to be back if you guys uh enjoy this content so thank you very much i'll see you guys later