Intro to Testing NextJS with Cypress

hey guys and welcome back to the channel in this video we're going to be talking about how you can use cyprus to test your next js applications now if you've never used cyprus before it is a javascript end-to-end test framework so let's dig in and find out how you can test next js so here we are in our next js application and i've just used the create next app because we don't really need anything special so now that we have the application let's go ahead and install cyprus and get it set up so the first thing you need to do is install the package so you can just go ahead and do npm install cyprus dash save dev and that will save it to our dev dependencies and our regular dependencies because we won't need this when we deploy our application but only when we're actually making development changes so once this is installed i'll show you how to set it up and get it working okay so you've installed your cypress package and now we are inside our package.json and we're going to add a new script here and that's going to handle our cyprus so just hit comma here and we're going to use cyprus colon open and then we're just going to put a colon there and say cyprus open and hit save so at this point we're actually ready to use cyprus so from our terminal we can run task npm and use npm cyprus open so let's go ahead and do that and see what happens so once it loads up what you'll get is this test suite and it has all the integration tests available currently this is the integration tests and you can go ahead and hit run over here on the right hand side and it will run all of these example integration tests and as you can see from the screen it loads a few things up and it will just jump through all of these different tests now these tests obviously don't really apply to what we're doing and are just examples so what we're going to do is create a few tests first i'm going to show you how to select just an h1 on a screen and make sure it has something that we want and i'm going to show you what happens when it doesn't work then i'm going to show you how get static props and get server props uh aren't affected by this and can be easily tested okay so now we're back in our application you can actually see we have a new folder called cyprus and inside of it is integration and inside of here is a folder called examples and these examples have our example tests that we had before actions aliasing assertions cookies etc and we don't actually need this so we can just go ahead and remove this whole folder and now we have an integrations folder so what i'm going to do is create a new file here and the schema is what we want to test spec and then js and this basically tells us that this is a test file so inside this home dot spec js file this is where we tell cyprus how to run an integration test so the first thing you need to do is do three slashes and give it a reference type equal to cyprus once you've done that underneath you're gonna do context and say what the title will be so in this context it's just the home page so we're just gonna write home page and then we are going to start our integration test so before each test is run we need to do something so write the words before each and that tells it before each test we want to make sure that we're on the right page so let's do cy visit and then http localhost 3000 and then underneath that we can actually tell it what we'd like to do so you write the word it and then give it a title so we're going to write should find our welcome page and message and then do a comma here and say inside of we should write dot get and tell it to get the h1 on the screen and then say dot contains and then the word welcome so now we have that what we can do is launch our cyprus and test this so go to terminal run and do cyprus open and let's test this out so what should happen is we should get successful test that says yes you've done it so if we run this integration test we're expecting something to happen now before each is the first part and it's looking to try and find the local localhost 3000 but as you can see it's been almost 10 or 11 13 seconds and nothing has happened and that's because one localhost is not actually running so this is going to fail and say we could not load this page so the first thing we need to do is actually launch our server and make it work the way we expect it so go ahead and close out cyprus and i'm going to show you how to launch and run the tests at the same time so we're back in our code and we're going to install another package here called start server and test and this is a way of making sure we are on the right port number and we're running our tests so to do this you're going to do npm install start server and test and then make sure you save it to your dev dependencies and once that's installed we can talk about how we're going to use that in our package json so i'm inside of our package.json and we're going to create a new script called test now this test script is going to take both running this dev server on the correct port as well as running the cyprus open together so to do this you can do start server and test dev 3000 so it's going to run this on this port so 3000 and then cy open and then that will run this right here and that will now allow us to run the tests so go ahead and hit the test run here and i'll meet you back in cyprus so here we are back in cyprus and you can see we have the homespec.js integration test that we just ran so let's go ahead and click the run button and make sure that everything is working as expected so now cyprus has loaded you can see that this home page should find our welcome page before visit it visited here then it got our h1 and made sure it contained the welcome that is right here now let's go back and quickly just make a quick change to our next js app and then rerun this and make sure that our test fails if welcome is not present so i have made a change and just called it hi instead of welcome so let's go ahead and run our integration test and now we should find that it fails and the reason is because it cannot find the word welcome as you can see here timed out retrying expected to find content welcome within this element but never did so now we know exactly that this did not contain the word welcome which is true so that's a really simple test in the scheme of things so let's bolster this up by adding a couple of different pages to our next js app and use get static props and server side props to do a bit of testing so inside of our next js application i've created a simple page that returns my favorite pizza toppings using the get static props method and as you can see here we have pineapple ham pepperoni jalapenos and green peppers so what i've done is then i've mapped over these in this list called toppings and i'm looking to see if these exist in a particular way so what we can do in our integration test here is create a new one called pizzaspec.js and inside of here we're going to do a very similar opening so you're going to use three slashes and use reference types equals to cyprus and just to remind you that tells cyprus that this is a test then i'm going to create a const at the top here of the pizza toppings i'm expecting to show up so in here we can do an array and inside of that ray we can do pineapple then we can do our ham pepperoni jalapeno and of course green peppers so now we have this we're going to test against this array to make sure that those are actually available when we are on the page so first obviously we have to create our context just as we did before so we'll call this pizza topping page and then inside of here we will do another function and inside of this function we're going to do a before each and inside of that before each we're going to do similar as we did before we're going to make sure that cy visits the correct page now this page is on localhost 3000 and it is called pizza then underneath before each we're going to check those toppings so we can do it check our toppings then do a comma and another function and inside of this function we're going to tell it cy to get our class name so the class name here is toppings and then inside of that the list and then each item and then an index so we know which item that we've got depending on how many are in your list i'm going to say cy rap then we're going to sell it the item and that item should contain dot text so it should contain some sort of text i'm going to do comma and when pizza toppings index so this tells it that as we loop through this we should expect that the pizza topping index that we're on so for all each loop it should appear in this order pineapple ham pepperoni jalapenos and green peppers and if it doesn't then the test will fail so let's give this a test first and make sure that it works and then after that i can show you what happens if they don't appear in the correct order and the same way as before terminal run and then npm test and now you'll see two tests so we're going to test them and both of them should be successful so i'll meet you when cyprus has loaded so here we are and now you can see we have this new spec called pizzaspec.js so let's go ahead and run this integration test and we should see two successful options here the home page we found the welcome and then our check pizza toppings it found this element contained pineapple this element contained ham this one had pepperoni this one had jalapenos and finally this one had green peppers so i'm gonna make a quick change and maybe misspell one of the words and show you what happens when we run this test and it's incorrect so i've made a quick change so let's run our integration tests again and see what happens so our first one was successful it shows a welcome message and as you can see right now it's trying to find this and it gives you the exact answer it says expected list to contain text green peppers but the text was actually green peppers with a lowercase p which failed our tests so perfect we've now tested that something should be expected so now let's see what happens if we use get server props instead of get static props and see if that changes anything in our cases so i've now created my favorite snacks page and in here we now have an array of snacks chips popcorn m ms rice cakes and jerky which are all some of my favorite snacks and we're doing the exact same thing this time we have a list called snacks and now we can write our integration test and this time we're using get server side props versus get static props and the reason is i just want to highlight if there are any differences between testing when there's get server side props and when there is get static props so to create a new one same as before call it snack.spex.js and now we can create a list just as we did before with all our snacks in it so we can just do snacks chips popcorn i like m ms i like rice cakes and of course jerky any type and then we can just do the same thing we did before we give it some context here we can say snacks comma and then we can use our function here to say before each we'd like you to check to make sure that we're on the right page obviously in this version we want to make sure that we're on the snacks page so that's http localhost 3000 and snacks so now we have that and we're visiting that site we can do a similar test as we did before where we make sure that we visit the page and we check what's in there so we can just say check our snacks and say in our function c y dot get dot snacks list so get the snacks list and for each one that's in there we're going to look for the item and then give it an index and then inside of that we can say cy.rep item dot should contain dot text comma and then snacks and index and before i run this one i just want to talk about exactly what's happening so we're going to take these these snacks which is in an array and we're going to grab our list of stacks and check each one of the items against the index and they should appear in this order chips popcorn m ms rice cakes and jerky and if it does then we can launch it so let's go ahead and launch this in cyprus and i'll show you how it works and we can see if there's any difference between i get server props and i get stack pro so here we are back in cyprus again we now have an additional snack spec so let's hit the integration and make sure that everything works so what's super powerful about this is if i go and change jerky to something else for example in our code which we can find right here and we say in the snacks let's change this to i don't know uh bagels not really a snack and we go back here it will automatically run the tests again and tell us hey we were expecting uh it to contain bagels but it was jerky so you can actually see up yep this list is incorrect so i can go back into my code make those changes really quickly by going here and going to our snacks and saying this should have been bagels hit save again and it will rerun those tests uh and we should make sure that that happens so you just click this run all tests it will make those changes again and now you can see we successfully contains bagels so you can see how flexible cyprus is and how easy it is for when you make a mistake or you get an error message in your tests how quickly you can find error fix it and move on so this was a short look into how cyprus works with next.js and as you can see it doesn't matter if you're using static props server props or anything like that everything can be tested so if you did enjoy this video make sure to drop it a thumbs up subscribe to the channel to see more next js in the future and until next time see ya

Channel: James Perkins

Views: 2,306

Rating: 5 out of 5

Keywords: Intro to Testing NextJS with Cypress, NextJs Testing, NextJS with Cypress, testing with cypress, next js testing

Id: 908tha_vR8Q

Length: 18min 21sec (1101 seconds)

Published: Thu Dec 17 2020