React App Testing with Cypress

[Music] i hope you're doing all right in this tutorial today we're going to talk about testing your react app with a library called cypress so let's go ahead and dive right in i have an older project i've got a video for this but if you don't feel like going through that and setting it up yourself that's fine the repo will be in the comments so i'm in the root directory i've got both a client directory and then a top level uh directory here so from the top level i'm gonna do npm run dev and that'll get our server going and connect our front end and back end and then i'm going to open up a new terminal and change directories into client and then i'm going to add our cypress dependency so i'm using yarn you can use npm that's fine so yarn add cypress as a dev dependency and you'll do dash dash save dev if you're running npm so now that that's going let's add a script to our client package json so make sure you're in the client directory and we can see our dev dependency has been added cyprus so in test we're going to change this to say cyprus open and then down here making sure we're in client in our terminal you can run npm test and so by doing that we're actually going to get a couple a couple things we're going to get a new cypress directory where we can create our tests and look at examples and do some configuration and stuff and then we'll also get a cypress.json where we can do our kind of top level configuration okay so when we run cyprus open as opposed to cyprus run which i'll show you a little bit later cyprus open actually opens up this little window and then we can visually see our uh tests running in an actual browser so it gives you all of these examples and to avoid it running all of these examples for us what i'm going to do is just change this examples directory uh change the name of it so in cyprus so you can see this new folder we've got in integration and then slash examples i'm going to right click on examples and hit rename and then just do dot at the front and so now you see there's no files so let's create our first actual test but before we do that in our cypress.json file we can do some configuration that is going to help us from um you know repeating ourselves a couple of times so the first thing that we're going to do is create a base url and so this will be a reference point for running our tests if you want to run tests on different pages different locations of your application then you'll be able to branch off of this base url rather than typing in localhost 3000 or whatever it is every single time so in our case our base url is http colon slash local host 3000 and so now we can save that and go back into our cypress directory inside of integration so with vs code it's got this examples directory but there's nothing else in integration so on integration i'm going to right click and i say new file and i'll just say homepage dot js they do have in their docs um kind of a naming convention and you can see it in their examples where they have dot spec dot js you can do that uh but you don't necessarily need to so i'm just going to leave it off and so let's go ahead and write our first test so we start off with kind of a a big bucket describe where we have the name so we'll say it renders the home page and then after that we'll have an anonymous function and this is where we'll write our individual tests so we'll start these off with with it so we'll say it renders correctly and then again an arrow function anonymous function and inside of that we'll have our content so we'll say cy dot visit slash so we're just visiting the home page now we can do this slash because in our cypress.json we have our base url so that's already a nice little feature keeping it dry for us so we'll visit it and then from there um we are going to cy.get this is kind of similar to like um like jquery selectors so we're going to look for something with an id of container and we are just going to say that it should exist so let's give this a save now we can see in our little cypress window here you can choose the the different browsers that you that you want to run in i'm going to keep it in chrome and i can just click on home page this is going to open it up for us and so this is pretty cool already it's rendering our our page you can see it it visited the uh the home page and you can see it's loading and you can actually hover over that and you can see the loading state but then when we get to this container part it fails so it looks for container but it never found it by default it's going to try for four seconds so the reason is that container doesn't exist so let's go ahead and make it exist inside of our app.js we have some tailwind classes for styling and we can just add an id of container and now if we run this again and that was super quick i'll run it again but it found the idea of container and now that test is passing so let's go ahead and get our second test going and for this we're going to use a cool feature in cyprus called their experimental studio so in cyprus.json we've got experimental studio and we'll set this to true so this is going to be actually a pretty cool little feature it's experimental right now i'm on version 6.5 and this is february of 2021. um i think they came out with it in 6.3 so with this experimental studio i'm not sure how long it'll be experimental but um check back and it might be a full-fledged feature at the time you're watching this so save that and now we click on home page again okay so we've still got our tests so let's write a second test that will help us or that we can utilize that experimental studio feature so back to our home page we'll say it and we'll say allows the date picker to be used and so here's a good use case i don't know exactly let's say i don't know exactly what the date picker like how it can be accessed or whatever i can use this studio to kind of help me out and point me in the right direction so we're going to do our cy.visit we'll visit the home page and then we're not going to write anything else ourselves just yet so let's save let's cannot read property all games of undefined cool so this testing suite is already helping me find some errors in our code let's uh go ahead and take a look so all games see app.js no let's check our games component all games okay so here uh what's happening in the code is this is actually being taken care of by apollo if loading return loading um but it's it's a good method to also make sure that we have data so i'm going to use i'm going to put a question mark after data and this is just called conditional chaining so instead of doing something like data and data dot all games what we'll do instead is we'll say data if there's data cool then give me data.all games and you could do this if we had uh kind of more deeply nested uh you could do something like this you could do as many of these as you want and it's a little bit it looks a little weird but it's a little bit more clean than doing the bunch of and ends so save that refresh our tests cool so now we're passing and so for this one we want all this test is doing is visiting the home page so we want the date picker to be used so you might have noticed over here there's this little wand icon and says add commands to test the first caveat here is that your test does need to be passing so it won't let you add a command to a test that's failing so if you're running into that issue and you've made some progress on a test or whatever you can comment out or delete the sections of your tests that aren't passing yet and then click on the magic wand add your commands and then add those uh those pieces of your test back in afterward so let's check this out so i'm going to click on this it's going to run my test so it does visit and now we're in this studio beta so i want to click on this it got the date and clicked on it i'm going to type in some stuff so i'll do o2 o2 oh it doesn't look like it's letting me but this actually might be helpful so let's save these commands typing into a date input with cy.type requires a valid date with the format this and you passed in zero so that actually is helping us by throwing this error but let's take a look at what happened so in our home page you can see we got this code that was generated with cyber studio we didn't have to type in anything so it got our date and it said to type some stuff and so this is what i love about cypress studio is it's not going to write all of my tests for me but it's going to point me in the right direction as to what i should be doing so it found the date and it told me that i'm typing stuff i just need to fix this typing part so let's look at the format so year month day and we want it to be a date in the past so we'll we'll do like february 17th the reason that we're doing this is if we're testing we don't know necessarily what the date is going to be and which games are going to be played on that date however if we choose a date in the past then in theory all of those games should be completed and we should expect the same data to come back each time so let's type in 2021 02 17. and so i'll save this bring back over the testing sweet so it does render correctly it allows the date picker to be used so it um selected this date for us so the date is uh february 21st but it changed it to february 17th and now we get all of these different games and so let's make sure too that we're checking to see that these games uh exist so let's go ahead and for this what we're going to do actually is if you've used react testing library we're going to add a plugin that helps us to kind of add on to this cy get and we can actually find stuff by text instead so i'm going to close out and kill this terminal i'm going to leave the other one running and i'm going to add another dependency so i'm going to do yarn add at testing hyphen library slash cypress with the dev flag while that's installing i'll show you where i'm getting these from so in cyprus on their docs page if you go to plugins they've got a ton of different plugins for different things things like authentication mocking data different helpers things like that and so we're grabbing cypress testing library which helps you write commands similar to how you would with react testing library so it'll make it a little bit easier and extendable in terms of finding different pieces of your app so going back here this is installed so we can run npm test again and so what we want to do is let's take a look at our actual application that's running and let's flip it to february 17th and we want to find some sort of text we'll find a team let's make sure that it's not showing up twice so we have the hornets and bulls may be showing this so the bulls are here uh this okay so let's the celtics it looks like they're just showing up once so we can find that text so back over in our app we can do cy dot find by text boston celtics should exist if we hit save run our test again find by text it's not a function let's make sure that this installed in our package json testing library cypress okay the reason that this is failing is because i forgot a step so i'm going to close this move this over there's one extra piece that i need to do and i'll show you how to do it in our plugins if you go to cypress testing library it's going to open up their documentation and so it shows you the step that i just did with uh the and or the i did yarn but npm installed you also need to import this so sometimes it'll be in this support folder sometimes it'll be elsewhere in the cypress directory but i'm just going to copy this and then flip back over to the app and inside of support commands i'm just going to paste this in and save it and now we should be back in business sweet so it does allow the day picker to be used we can see that it went to the home page it got the date it switched it to this date then it found by text and i should be able to switch that to back to find by text that would work as well okay so last we're going to write one more test so i'm going to close out of this and close commands and we'll do it routes to a teams page and so for this we're going to do a couple of extra little cool things so inside of our describe you'll notice that the start over each of our tests has the cy.visit instead of typing that a bunch of times what we can do is at the top of our describe we can do before c wide out before each and then we can just pass in a function and we can do cy.visit and let's get rid of these visits i might not need to see why i need to check but we'll just run it and see okay that's what i thought so let's get rid of that cy and just run before each and so now it handles that visit for us each time without us having to explicitly write it so that's kind of a nice little helper next thing that we're going to do is let's actually uh let's say that we were going to reuse this boston celtics and we will just to kind of show this point so let's grab this boston celtics and copy and then in our cyprus.json we're going to add another property called en env this is going to be an object and this part we can call whatever we want i'll say celtics and then this is our value boston celtics so this is what we're going to reference it as this is going to be kind of like our constant and then this is going to be the value so we can now use this if we were going to reuse boston celtics multiple times so inside of home page we can go to the top and we can say const celtics actually let's do this in all caps celtics equals cyprus dot env celtics and so then here we can cut this out and we can just reference the variable that constant celtics and if we run this again that should work as well and it does it's still passing so let's use that in our next test so we'll route to the teams page we'll do we're actually going to use this part again so we'll get to that same date we should make sure that celtics exists and then we'll do find all by text celtics and we'll do a dot click so this will click on that link then we'll check the url and we'll say it should include and then [Music] teams slash 2 because that's the celtics id and that's how our routing system is set up and then we'll also do a cy find by text and we'll say conference east this should also exist and so let's watch this uh in action here sweet so if we run that one more time you can watch this route to the teams page so i clicked on it urls there you see conferences it's the boston celtics page so so pretty cool um and you can just watch that happen um a couple of last uh helpful things depending on your sort of like use case is if you i mentioned earlier that if you have a uh like a qa or staging site and you want to set up kind of like different environments for that then what you could do is uh this is one method so in our in the same level as cypress.json i'm going to add a new file so let's go to client new file and let's say it's like cypress dot staging dot json and so over here what we what we would do is you could update any of these um properties any of these values if you have different um like environment variables or anything like that and then the cool thing is in this base url you could do like you know my staging site.com whatever your staging site is and then from there it'll just reference that url it'll actually pop this up uh and that'll work for you and so then in our package json what we can do is add another script and we could say like test qa and then what we'll do is we'll say cyprus open dash dash config file and relative to our package.json we'll say dot slash cypress.staging.json and so this i don't think this is going to work uh because my staging site dot com may or may not be a real site but let's do npm run test qa and so you can see it's opening up this or referencing this staging.json so we could not if we my stagingsite.com might not be running um so if i open this up it's again probably not going to work but you can see my staging site.com now as opposed to localhost so none of this is going to work i'm going to stop it but that's how you would set that up another thing is if you wanted to run this in the terminal instead that's as easy as just switching this to cypress run and then save and so now if i run my npm test it's not going to open up that browser it instead is going to run all of my tests inside of the terminal so my tests are passing i get my results it's a nice little table you can also see that there's this videos that pops out a little recording so if you did want to access that uh it would have the the mp4 file for you if you wanted it to turn that off you could just do video i think it's either video or videos false you can check the documentation for that so quick little run down intro to testing a react app with cypress i've got links to this repo in the before testing um phase and then a link to the cypress documentation um so if you have questions check out their docs and then if stuff still isn't making sense you have more questions then let me know in the comments below so thanks for watching and i'll see you next time

Channel: Chris DeSilva

Views: 16,959

Keywords:

Id: 5ajwAkZDbwo

Length: 26min 44sec (1604 seconds)

Published: Sun Feb 21 2021