Set up Jest in Angular in under 7 minutes tutorial (Angular v8 - v10)

hey welcome back to my channel in this video I'll be showing you how to set up just in an angular 8 project this comes quite highly requested off the back of my chest angular tutorial video where a lot of people were having a bit of trouble setting up just in their projects so hopefully after this video what haven't you set up and ready to start unit testing right let's jump into the code so to start off with I've got myself just a default angular 8 project here I've just created this using the angular CLI and all that I've done to customize it is I've added one new component in that component I've got a couple of very very simple methods here and I've written some unit tests in jest making sure to use a Jess keyword here just to make sure that once we've got this all set up these run correctly and so before we get started there are a few different ways to install chest into angular the way that I've opted for personally is to remove Jasmin and karma and let just handle all of my unit tests and then what I tend to do is I don't even use just for my UI tests with test bed and stuff I tend to just use Cypress relax I find us a much better interface and so the first step that we're going to do is we're going to remove all of the Jasmin karma packages and the reason we do this is I find a lot of the time that when you try and keep all that in there and you get a lot of name space classes because jess was originally created off the back of jasmine so they've got a lot of shared names so the first thing we want to do is if we open up the terminal I've tried to make it with it nice and big here so if I couldn't paste this into here and I let that run I'm removing karma karma chrome loader karma coverage Istanbul reporter karma Jasmin karma Jasmine HTML reporter so just getting rid of all of that and then the next step is I want to add Justin so if I paste this into the terminal I want to install as a def dependency just just preset angular this is going to do a lot of the work for us and then the jest types so we let this run through so now that we've got that all installed if we close that it's the last thing we need to do in a terminal now we need to create a new file now you can give this file whatever name you want but I call mine setup jest dot yes and I'm gonna add that now the only thing we need to add in there is an import for are just preset angular so if I talk about in top this is also a good place that if you've got yourself some just mock packages or anything like that this is a good place to reference them in here we save that we can close that now we need to add one more file that is the jest config J's file so if I scroll to the top here we're also going to add this one to the root and as I say we'll call that just config dot J s this time make sure to make it J s and then we add this and I'm just going to copy and paste my module export into here and most of this stuff is pretty self-explanatory in our setup files after environment we've got the guest file that we just created the setup just file in here I've got a few patterns to ignore we're actually not using any of these in this project but I wanted to leave them in because these are quite common packages that will have issues we've just and so we've a socket IO and ng rx and all this does is it just tells Jes to not bother running tests through these files suggest will completely ignore these which is correct because you didn't write this code if you're using a package you expect that they've tested the content of that package and then the last one down here once again I've got a little ignore path this one's for Cypress once again don't need that because we don't have Cypress included but I'm just showing you that if there's any roots that you just want it to ignore chuck them in in this list here so we save that and then we can close that file as well the step 5 we need to go into the TS config jason will jump in here and then we need to add the jest types to the CIM our options so we've got the compiler options here we can check this anywhere we want I'm gonna put it here it's alphabetical and then we can save and close that and then we have to do a similar thing in our next step but in the TS conf expect Jason so C here instead of having Jasmine we want to just change this to jest and we save that and then kind of for our final step although there is an optional last step if we go to our packaged up Jason and we open this up currently when we run the test script it just runs ng test and that's fine we can set it up to work that way but what I prefer to do is add in a test which just runs just and then a test watch so that we can take full advantage of that automatic reload as we update our tests now I do have one final step and if I just open up the terminal here and this one isn't necessary but because I want to remove karma I don't actually need the karma conf in my project and I also don't need the test ES file so what I'm gonna do is I'm also going to remove those now they're gone if I close my terminal and if i refresh my scripts here first of all we're just gonna do tests watch zoom in on that so we can see what's going on this should all be set up if I press a for all to run all of my jest scripts now I've got three passes there and if we jump into this test file here just to make sure that it is actually running these tests and we'll change the expected from of this to be four instead of three just to make sure we get a failed test there there you go we've got our failed test saying that four should actually be three so that's working correctly if we close that and we're going to do the same again just for test for one time runs of tests once again we've got our error there if we change this back to three and rerun this perfect and then there's one last way of running our tests with the way that we've set it up if I close that down in webstorm and some IDs we have these little ticks and crosses by our tests I can actually run it from here as well and there we have it we've got our pass tests down here and with that that's everything you should be good to go I have put a link in the description there's a full installation guide on my github repository there if you have any questions feel free to leave them down below in the comments and I'll try and get back to you as soon as possible please like subscribe share if you like this video and other than that please take care of yourself

Channel: TheRyanSmee

Views: 7,545

Keywords: Angular, Jest, Jest.js, Tutorial, Unit testing, getting started

Id: Dt8RtykEglo

Length: 7min 18sec (438 seconds)

Published: Mon Jun 15 2020