Write your First Test with Jest | Jest Tutorial | Test React, Express, Next, NestJS with JEST

welcome to Arc tutorials if you're working on JavaScript or any of the modern tech Stacks like react express.js Nest or next.js chances are that you will have to write tests today I'm going to show you how do you write your first test using just Library it's a popular Library it's used across different Enterprises for small and big projects and you should know this Library if you want to become a better developer with that being said let's get started I'm going to show you everything you need to write your first test in test we'll start writing with some basic JavaScript Code test it and then keep increasing some complexity the idea is to show you and build confidence in you that you can write tests easily with that being said let's jump right into code the first thing I'm going to do is create a folder so that I can show you everything from scratch and nothing you miss out all right so I'm in that folder I'm going to do npm in it give the basic details if you want to fill in I'm just leaving for now all right the next thing you will do is npm install just save hyphen tab so this will install the just for us while it's building please do hit that like button and subscribe button so our package is installed that's good I'm also going to install axios Library that's one of the popular libraries for making HTTP calls that's used in Express react nest.js and every on most projects all right so that being done if you check our package we got the just we got the axios that's good for now now let's start writing our test Scripts before we do that we will need a file to test right so basically I'm going to start with the basic JavaScript code to build your confidence so I'm writing a simple method all it does is a plus b and return you that value it's a method which takes two parameters and will return you the sum of it then we will export this using module dot exports equal to sum once you have exported now we can write our script by the same name the only condition and criteria is that the file name should end with test dot Js okay whatever file name you have given same file name DOT test dot Js when we run the command to test it will find all the files which are having an extension of Dot test.js and we'll execute them all right so that being said now let's start writing our script to verify the method that we have written so I'm going to require slash sum we are importing that method and now we are good to start writing so first we'll write describe what is it validation validating some method and then call back okay and then we will write our test and inside this you will write what you are trying to test so let's say I am saying addition of numbers okay now that you have done it then call back okay all right so now that we have it in place we will write our expect statement and we are saying when the sum method is called with values 10 and 20 the expected outcome to be 30. now this is the most simplest example I can show you ever it cannot get easier than this these are called assertions okay there are lot of built-in assertions like to be to equal to not to be etc etc but for you since you're starting to learn just this is the one that I would encourage you to start testing with okay I will cover some more as we move along but for now just understand used to be that is the value that you are expecting it to be that being said how do you run it you type npx just and enter it's it will find all the test all those files which are ending with DOT test.js execute it and show you the result here you can add any number of tests inside a described statement like this okay but since we have only one method for now we have only one test all right so this is the most simplest first test script that you should write when you are trying to learn just but I will not leave you high and dry and that's why I'm going to write some more examples to show you that you already know if you know JavaScript you can easily write tests and that's the confidence I want to see in you that's the confidence I want to build in you so let's go ahead and I will write some more examples I'm going to say fetch data.js now in this I'm going to increase the little bit of complexity okay so our JS will be little bit tricky but don't get too much confused it's just a promise that I am returning in this so I will write new and promise so promise will have reject and resolve so reject and then what we are going to do that and I'm going to Simply say set timeout and say after one second resolve this and return the data right now you can return any data you want Json string integer so for now let's say I'm returning trink and I'm saying it once it is once this function will make a it has a promise inside it and once this Returns the promise after one second it would just be that data which is the string are tutorials right so why did I write that this is to show you that when you have methods like this which has promises some code like this how do you still test them that's the confidence I want to build in you all right so this is my code now to write the test case right fetchdata DOT test dot JS same file name with extension DOT test dot Js as usual the first thing we'll do is require and bring that method fetch data once you have it we can write describe again and give and say what are we testing validating fetch data and then call back and inside this again test okay and then we are going to write what is it doing testing for promise resolution ring okay and then again call bank and close it now here we will now write again expect and now call the method fetch data and we know but before we do that it's a it's writtening a promise so we will write return fetch data call that method then what should we do we will get data and then what do we do with the data we will validate it we will check that data to equal say Arc tutorials that's what is our expected outcome so we are saying when we call this method when we call this particular method we will get data back because it's a promise so that data should expect that data to be equal to the string that we gave in our method which is Arc tutorial simple as that right now let's go ahead and run the same way npx chest now it will run two two files okay so it says failed now let's see why okay so it says validation has failed fetch data is not working okay I know why because we did not export it exports equal to fetch data okay so now this should get resolved make sure that you write that module dot export so now you see it says it executed two files which is ending with test.js and both are passing this is second example I hope you are building your confidence in writing the test I am going to write one more JavaScript code which is a common use case in most projects which is to make a HTTP call and then get the value so let me show you that so axios call dot JS in this I'm going to write a method what it will do is make a API call and we will test that so again require now in this I'm importing axios because that's a library that's used in react express.js to make HTTP calls now we got the axios now I'm going to write a async method and what it would do is make that HTTP call and get user data I'll pass an ID of a user and I will make a API call to get the data so since it's in async I am going to write try catch and console lock the error and in the try I am going to say get the response for the API call so I'm going to say response here we'll write a weight axios dot get right now this is a built-in method get which will make a get call to a URL that will provide so I am going to say https there is a free API mock service which is called Json placeholder type code I'm going to use this and I'm going to parameterize this value that we are passing from our URL from the function so what this does is it will make a API call to this particular URL and will get us the response now all we will do is we'll return this response dot data okay that's all for this method now it's just making an API call and returning you the data again exported and say get user data save it okay so in most real-time cases you will anyway be making a API call so that's why I have taken this example all right so now that you have this method let's create the test file axios call DOT test dot Js now in this we will need to import two things axios and our get user data user data or what was it axios call right okay so now we have the get user data now we are saying chest dot mock axios we are mocking that particular API request request describe testing http callback inside this test write validate get user data then again call back and then in this we are going to mock the data okay that the response so I am saying mock response data is equal to it will be a Json object with ID say 1 and say name equal to R tutorials okay so all I have is a simple ID and name that's what I'm going to return if you see here ID and name are there right so you can add the same things username you can add any number of fields um I'm literally don't know since it's anyway mock data it doesn't matter right okay so I got the arc tutorials Json ID created so that's a mock response that we will validate against now I'm saying axios dot get Dot now we'll use a new one called mock okay resolved value once okay so what this does is basically it will return this data that we have so axios will say that whenever there is a get call it will resolve only it will make this mock data as an output it will return that only once okay that is for testing the mock response now that we have it just say user equal to it's async method so we are writing get user data and will pass a user id1 now it says await expressions are only included in so is this not a sink it is async uh what have we written a weight should ideally get user data inside the actual skull we have our async and we are having a weight this we are returning this is good async function let's see what are we getting called here it says await I think I'm okay because if it's an async I'm going to write here also and this should solve it async oh here it should be a sink okay so yeah so here you'll write async because we have it's an async method okay so now I have constant user get user data and then we are going to do a assertion and say expect user right to equal the mock data that we have mock response data okay that's all we would do okay now let's see this in action let's run it in PX chest it failed okay let's see why it failed so it says just dot mock doesn't exist okay so let's see why that's because this should be in quotes now run again so now it waited for this async call to get complete and then it passed all the three tests right so it's very simple don't get too scared by seeing this code or anything it's dead simple all we are doing is mocking the data comparing with assertions right this is the mock data that we are setting that axio should return here is our function which would then compare okay so inside this we are making a get call which is this it will mock the data and return us the response okay now let's say there was a failure okay or anything okay we can keep adding expectations to it and say throws error etc etc but that's for higher but you want me to code that also let's do that okay let's say I'm I want to write a scenario where my API fails so I'm saying validation of API failure okay all right so this is a bonus for you I initially thought I'll write a few but since it's getting interesting I'll continue coding all right so I I what I want to do is I want to handle the failure use case Also let's say my API fails right so what should happen when API fails that's what I want to test so you can use axios.get dot now this is where you will use there is a built-in method called mock rejected value once just like how you have mock resolved value you have something called mock rejected value what this will do is it will tell you what to do when there is a failure so here I am saying new error and I'm saying API failed or something like that right okay so now I'm saying my API let's say let's fail it okay so I'm going to say a weight and then expect in this case I'm going to say get user data should be failing and because I have written here that when it fails we should do that so here I am saying get user data has failed and then I'm going to say Rejects Dot to throw an error okay now here you can say fail to get user data okay so all we are telling is axios when this API will make a get call mock the rejected value that means what should happen when it fails so we are saying throw a new error and then here we are saying expect this method when it will call Api it should get rejected and then it should throw a error okay let's see that now let's again type npx test and see what should happen it failed so let's go here and it says received promise result instead of rejected okay so validation rejects to throw validation of API has failed okay so here it says API request failed which is as per expectation right we wanted it to fail and that's where we are covering it right so that's how you would throw errors or you can handle negative use cases Etc you want this to fail because you are here you are rejecting and you're throwing that error and if you want to see further details you can see uh here also and it should say validation of API failure right so this is expected this is expected outcome okay because we wanted it to fail that's why we are throwing this reject dot through so this is these are some of the commonly use cases that are used for testing but I'm sure I've covered enough use cases for you to build confidence of writing your own First Steps in testing with just I hope you have enjoyed I hope I have covered enough use cases for you to build your confidence and thank you so much for joining in this episode please do watch out my other episodes on express.js MySQL cred uh I have series on bootstrap angular the learning continues thank you so much for joining in this episode I hope you have enjoyed I hope you have learned I'll continue Series in the next episode thank you

Channel: ARCTutorials

Views: 1,722

Keywords: javascript testing, javascript testing jest, javascript unit testing, javascript tests, javascript unit test, javascript testing tutorial, javascript tutorial, javascript jest, javascript jest tutorial, javascript unit testing tutorial, jest tutorial, jest unit testing, javascript testing for beginners, javascript testing with jest, jest for beginners, jest testing for beginners, js testing, js unit tests, js jest, js jest tests, js jest tutorial, js, jest

Id: PNQSpdlxtqw

Length: 21min 22sec (1282 seconds)

Published: Thu Jun 22 2023