Testing JavaScript Apps With Jest | Rajat Saxena | Skillshare

Testing JavaScript Apps With Jest

Rajat Saxena, Full Stack Developer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
7 Lessons (44m)
    • 1. Introduction

      1:15
    • 2. Course Structure

      1:12
    • 3. Setting Up The Developer Machine

      2:14
    • 4. Testing A Utility Library

      13:22
    • 5. Testing Data Structures

      9:41
    • 6. Testing APIs

      14:19
    • 7. Bonus Chapter - Test Coverage

      1:34

About This Class

In this class, I will teach you how to test any kind of JavaScript application using Jest testing framework. Testing is a core part of developing software, so let's get to it.

Transcripts

1. Introduction: Hello, everyone. This is a guide. I get Tom Brady studios. So I got this one request to record a video about how one contest JavaScript applications easily. So this is this one little mini course which I have designed just toe arrest. That one particular ready. So in this course, I'm going to teach you how easily you contest your job. A step application using JavaScript itself. So there is this one pool with the name just which we are going to use in order to write our unit test cases. Now, if you are super new toe testing and you don't really have any sort of idea about how to go about testing and what testing is all about, I request you just grow on my channel and check out our testing primer. It will give you all the basic information about what is testing what Abou the tears. How right? Test and Warsaw. The test can be written for testing and applications so it will prepare you pretty well for testing. Interesting video. We are going to test some real Jarvis court. You think the jets spring, but 2. Course Structure: Theo just is a testing framework designed by Facebook, and it has quite quite a lot off attention and love from the developer community. And even I used just for testing my job application. Not going through this course I'm going to teach you how easy you can just see different sorts off orbit is now. The 1st 1 would be library like this one. So this is just a simple math library. It provides with some basic met functionality. The other one would be a beauty structure. So here is our state data structure. So we are going to test our stack, the structure, use ingest. Then finally, we would have a look into how easily we contest FBI. So if you arrive, some sort off beckoned for the vessel. This you would get some intact about how easily you could test those AP eyes. You think just 3. Setting Up The Developer Machine: less start without testing. But before we can do that, we have to set up our work a station for testing. The very pluses there visually to take is to download this source port. So here, as you can see, that there are all the source court off all the things which were going to pass, in case you want to fight these states on their own. You can do that In case you want to read more about these. Corbett says you can do that. But in this particular mini core cities, I'm going to Yes, the old reading in these files. Okay, so we are going toe grab this cold, okay? And less get blown. This. So let me go toe there, there and J pest, which is up, and people that which I have prepared for this and let's let get clone. And this one's so it will grown all the court from the server to the local system. Okay. Says you can see that we have got part Scordia on like, but we can now go this. And now we need to set up just so. First of all, we have to initialize a package Georgeson here. So who do that? We can do? Yeah, in it. And then by and now we have got our peckish dot Jason, so less and just as a dependency to do that, you can do yard ed nella death because we don't really need this dependency for actual application self. So it is only going to be up there the penalty and yes, is told that All right, now let's open this thing up in V s school. Oh, so we have got our board yet, okay. 4. Testing A Utility Library: Let's start with testing this met dot gs five. So we would create a new file here. So let's create a file with a name like METI God best dot gs. So just can automatically the death file lives ending with test dot Js What? Respect dot gs. So we are going toe, you know, adopt this test. Yes. Naming convention for a testing files. So let's period this and here we can write are just poor. Before we can do that, we have to make sure that justice aware off the environmental, this executing in Otherwise we could face several inconsistency via testing our system. So we have to go toe our vacations or Jessa And then we have to write this block, which test just that it is running inside a north environment and not in that browser and violent. Okay, so this is step is, like, kind, unnecessary who are white, any sort off inconsistency? Because I fear some during my testing Peter, or like so, let's write some test. So first of all, we have to open our file. Let's suppose we want to test this air method. So what do we mean by testing? So We need to be sure that it is adding the very bus correcting. How can the exit do that to left to start writing our very first test. First of all, you have to require the original source poured in your Yes, that is this. Okay. And let's write. I posted right test you started it the best cloth or function. And the first argument is that string which test you what he has to actually conducted so we can give any sort of testing for let it be something like add one and three. Okay, then the second argument is the callback function, which is going to be executed while running this test. Okay, so best the output off the function ed we have to use Mitch is no match us, actually. Just the value off something it got after executing a function so we can use matches like this. So expect. And then we can called the method that is at, and then we're going to provide it the d input, and then we can use a measure to be which matches the value off the output off. This a function called okay. And it should be food Okay, so this is our first past his off Our uniqueness left quickly Best whether we have written our best successfully or not. So we can do yaar and then run Just Okay, so it is going to pick up the stairs door Js file automatically. And as you can see, there are test has passed Now, in case you want to be extra sure Less tried to change this to five and we know that it should fail because one plus v can never be five. So let's pretty grounded again. And as you can see, that the expected value waas five As for artists, but it actually returned food. I mean, this concern actually written for Has the test fail? So that is how you actually guest your javascript court. Okay, so let's side some more tests. Now if the have a look at this, this is doing and add it in case the second argument is zero. So how can we actually that this sort of thing there ah, function is point error and we exactly want to test that it is doing an error so right, such a test You can write yet another test and then begin by dividing by DEEDLE. Okay, then God. And when you must function who expect and then check tothe V right this sort off notation. So Matty got there, and then we are going to provide the arguments, okay? And then we can use who told meta. Okay, who throw matchup, and then we can check three. So if we are going to provide this this thing here, it can actually best Who? Let's run test now. Okay, I forward to connected. And yes, run our desk now. So as you can see that are there just past and it actually through an adult at which this do throw court. OK, so that is how you can actually fished these exceptions and adult statement as well. Now you can read more about Warsaw off me, just at every level in just using this page. So if you are interested in learning more about these matters and all, maybe you want prevented this one particular page and you will get to learn more about matches like these and to be close to okay. So you can learn all of this on your own Now that you are aware off what may just our end like what can be done? You think matches and we're toe find their 11 in permission from So there's ah, have a close look at this square function how this square function is actually using this might replication function and it is actually using this multiplication function to carry out its function. What if he wanted to design a test which would, yes, that whether this square function actually called this multiplication function internally or not, we want to be extra sure that it actually does that that the multiplication of function Jack scored inside this square function How would we do that? Just actually allows us to despite all on any method. And we can actually more methods in order to gain more information about that internal execution off any function or methods. So we can actually no, no, this multiplication function and then because you know, against some sort off spy to this multiplication function and later on credit that despite to get more data about where that it wa skin both watch sort off data, it was involved of it and all sorts of things. So I will demonstrate it in my next this. Let's write a new test. My pee function board scored in sweating. Okay. Or should be violence very by sweating. Okay. And then again, this and function full, hostile, less. See that where there are normal squaring is working fine or north square. And like we like me again. Let's check the out. Propel you. So let me guess. Run this. Okay. It is Berky fight. No, we want to check that. Whether multiplication is getting called inside this square function or not to go that we have to actually walk the function. Which means that we have to replace the actual implementation off the multiplication function, using one created with just Okay, So what do you mean by walking? Walking means that we are going to replace the actual implementation off our function with update one. And then we can query that take implementation and passed around the state implementation to other functions so that we can get more data and more insights about debt by people are more function. Okay, so first of all, we had to walk the multiplication function. To do that, we have to use this. Jeff just got function and then Bork implementation Okay, So this is the implementation for this multiplication function. Now it is going to substitute this implementation into the original source for viol testing . So let it just return minus one every single time. Okay? Who now are multiplication function? Is this left? Expect Met de with and then who then? Maybe. And it should be minus one. Do this particular implementation. Okay. And let's remove this. Okay? Because we have replaced that definition off. Michael. Application mattered on this. Who this. Okay, so it should be one less quickly tested. Let me save this trust and test it again. And as you can see, it has passed. So we have successfully more car pollution now we can actually, you know, get it. More insights about whether it was called on one. She's we have replaced the implementation and it is returning minus one. We are some. We assure that this multiplication function is actually getting called. Is that this square function which was our primary motive. But let me extra sure will be extra Sure. Less right to, you know, very some data from our monument. So expect met the George Muller, which is our mock method, and who? Yeah, being called science should be one because it is getting called only one in our square. Medford. So there. See? Okay, it was getting cold on the one time. Hold the extra. Sure, maybe one group change this to poop and retested. And it will feel because clearly it was never called. Why? My only once full, they work this one and let's just some more toe met he door multi Who have being cord of it . And then here we can check board sort. So are you May get lost. Cool. It should have bean all with these two arguments and there. See? Okay. So everything but so here we have successfully tested are met you dot Js library. You can write similar test for other matters like self multiplication division. I have only demonstrated the edge cases and the other left out Test cases are comparatively easier to write. Then the test I have retained in this one partner met got gorgeous file. So this conclusive are testing off our basic utility libraries like method or GS 5. Testing Data Structures: so less test our data structure there this step. So basically, if you are not aware of the state, basically it is just like a real life hysterics for sub. Let's suppose you have a stare off place, so you can only you know what the played that is on the top, or you can only take of it. The players dentist resting on the top of the steps. You cannot just, you know, take out a plate from somewhere down the step. Right? So you cannot do that. In case we're not aware off this strange structure and how it was I would request you to check out some l work on a book about how you can actually implement and but with his stick . So basically, we are going who passed the functionality office take here. So we're going to put some element on the stairs and then pop some elements from the stick , and then we're going toe query. Whether the size off the step, which can be retrieved using this function is equal to what beating, right. So, after pushing who elements on an empty step, it should be to so we can push and pop using these functions, and then we can query the size function in order to be a dick. Correct Size. Okay, Who lives the light? I stick best. Who s I have already pulled you that just can actually detect dot test door gs and got a spare guardian. So now this time we're going toe. Use it. Respect Georgie s convention. Okay, just toe show you guys that both off. These are fine. Now we have to trust a fall, require the state court into our pile. Quiet. They don't. Yes. All right. We have bought a stake in our function. No, here I born You talk a little bit about scoping so you can club test together on that one suit and that world food is executed at once. So suppose you have who? Conflicting test cases. Like in our present example. Let's consider in one test, I want the state to have five elements before even starting the test. And in the other test, I want the stairs to have more elements before starting the test. Now, we have conflicting test cases before starting the test. We actually born the estate to be off to defense kinds, right? now we can actually use scoping, too, you know, segregate are related test cases. So if you have five past, which actually want to stake to have five members before even starting the testing, we can boast best under one roof and scored them using this. Describe cross. Okay, so let's write our first their suit using describe. So here we're going to test that normal function or the stick a late and again. The motivation is very similar to the test notation we have seen now here. Beer would write all of the test, which required a similar sort off initial stage for every test. Let's suppose we born step to have two elements before every single test. So who do that? We can write laws like before all or before each before all means that it is going toe condition the step before executing any off the test. In this before each day's that it is going to condition the stairs, every single them, it is going toe execute a test. So if there are five tests in this one particular describe law, it is going to recondition the stairs every single time it is going to kick off a new best for it will recondition the state five times. So, first of all, we had to two year the stairs there. We have to push two elements you can push to, and then we can push. Okay, so we have They can't some initialization for now, we are going to write our tests. So pushing element less for us? Yes. This who shaping. Okay, Now let me this push our elliman and less quickly use a measure to guess the size off. Our step is three. Because these two elements were pushed before conducting the stairs and doing the stairs. The third element, What pushed? So we need to have three enemies on our this stick, OK? Seoul? Lex, quickly run this. And as you can see that everything Well, now, in case you want to test only this step pile, you can do this. They have got respect, Guardia's and it will only them. This is to expect Lord gs file. Okay, So less test. The popping often element as well expect is dead God pork. So, after stepping, because, as you can see here, what actually returns that diluted has fought from the stairs. So the value it should stop should be Gen Why? Because before running this test, it actually ran this test because it is a before eat. So it is going to be than before. Every single cares it is going to perform before running the stairs, the step got cleared. Then who? Elements were pushed. Now we actually tried to remove the top most element which happened to be Jen. Okay? And we can also hear something like expect big board size now. It should be one because only two is remaining on our state now. Well, let as you can see both off our Yes, give this past. All right, so we actually club similar sort of changes under one roof here We did before each. And then there are several other methods like before, All after all, after each, which you can learn more about from the just documentation. Alright, for less right When more the sky block or that suit, As you see ach, kisses. Okay, again yet going toe introduce an initial ation mapper. And this time we are which only one I am Okay, So, like, what could be the edge kids Now, in case off the state. Let's suppose you only pushed one element on the step and you actually tried toe to elements from the state. What would happen? It's short thing. Like all it should provide you with something consistent results. So what will happen in our kissed TV have only pushed one element. Now, in case we tried to extract who element, it would not do any other. It would just Britain undefined the second time around. Okay, so let's test this. So we moved to L. A man's well, there is on the one. Okay. All right. So stared God, because we're not going to test the outcome off this popping because we are not concerned about the only thing we're concerned about. ISS stand up and now should be to be undefined because there is no second element on our step and s, but the cold off part of stairs, it should return undefined. Okay. And this is one more measure and you can read more about it from the very same documentation. Okay, Okay. So everything is part. So now you know how to scope all group your test cases in their soups and like, there's some sort off initialization for similar tests using that crime block 6. Testing APIs: now, the third thing which we are going to test is an A p A. If you write some sort of back and cold or the court with his coaster on service, most of the time you are writing some sort off P p I, which interact with other front and side. So it is very ashamed shell to test whether the FDA is working correctly or not. So let's have a look at our server first. So this is basically a new genes were server and it is very simple. It is just returning this Jason on everything. Girl, get request, OK? And we have got our FBI, which is nothing but a stretch matter rep er which means that whatever fits returns, it just returns that or equal to back to the cooler. Then it just one more guest that if we're going to passed in our albeit function, it is actually going toe pass in. The rest falls return from the patch FBI back to the alba function. So it is going to call there the callback function with the result return form the batch. Come on. Okay. Otherwise, if the processor is no, which means the callback is not provided. It is just going to return the desert. It bought some the execution off pitch command. Okay, so this is just a simple A p a. Now, the real world AP eyes are going to be much complex than this one. But for the Sikh off demonstration and learning, we are going to keep it really simple. Now, in case you don't really have an idea about promises and work is fetch and what that's it do I request to check out Mozilla's documentation about veg and promises and make sure you understand these things before proceeding on to the testing thing. Because otherwise, in case you don't understand how these things are supposed to work, you will not be able to tell these. You will not be able to understand board. I am talking about violent designed those tests. So Indians who are new to these make sure who learn, promises and fetch FBI and then write some simple programs whose in fresh and all, just get more idea about what these things are. In case you already use this, I think you are well prepared to write some tests using just pasta. Paul. Let's run the server and so that you can do NOTTs Server orgs and it is as simple as that. Now open a new terminal window and I curl http local host and number 8000 because the server is running on time but 8000 and decided and even see that we have got up Jason bed. So it is just a simple Jason or restive Shiite server A light. Now we can actually use this a p I to test whether we are getting correct result from the suburb or not so less right our test which actually test that that we're getting correct answer from, you know, stretching this u r l or not. Okay, So as you can see that it is basically just quitting this local host 8000 u R l. And it should get this result as an answer. So let's create a new fight and that should be a P. I bought test gs or respect. Yes, it let it be best years and then we're going to require our FBI. You're not best. Okay, well, like so let's write a test we cannot describe. But since there will only be one past in our tutorial swam with skip the desk. Christ, And we're not going to do any sort off pretty initialization before conducting the care so we can't escape. Their describe blow and callback function has been See. So let's Rhetta ap, I brought FBI because FBI contains this 80 a method, So hence maybe I got 88 now, as you can see, that we can pass in a call the function. So we are going to pass in a call that function like this one. The sports should be their store. Jason. So we are basically been passing the Jason response we got back from the server. Okay? And once we have passed the the response, it should actually match who match. This is one more measure you can use to match success, but it actually just regular expression. I'm just using this to match measure just to show us that this measure is also present. But you should use equal. But for the Sequels, writing a test, we can write who, Mitch here. Or we can use too much here. So what is actually happening here? See, this is a promise based four, so basically we have passed in this processor and this process that is going to be applied in this fashion. And the results from that Jason passing or the object returned from Jason passing will be provided to this, then close. That is how actually promises work. Thanks. So this is all promises. So basically, it is a casket off, then forces that is happening here. And when testing promises, we actually return the promised bet. That test. So that is how you actually test promises in just you just returned the final check back to the best. Okay. When there's a horrendous beyond unjust, an FBI, the best Oh, it cannot find node module. Which means that we have forgotten who stole the dependency yon air Nord patch run this thing and the Northwest dependency would've been Paul and which is actually required for our epi aid orgs toe. Now it's Children correctly. And as you will see that the past has passed, let's try to shut the server down and re test this thing again. And as you can see, it failed because the server is not running and be a guard. The connection refused. All right, let's read in the server again. and the but home. This test and we have court are yes, success is her bet. So we have tested our life server using chest. But as you know that a thing programming is hard, and most of the time then best services are interacting with each other. The process can be time consuming, so you can just all this way for the server. There has to be some method or some way using, which you can be sure there, the casing methods will succeed, and you don't really have to wait for them to complete. So let's suppose there are two service, so you're back and service is interacting with some third party said would like Facebook service, So you can not just really wait for dead long in order for your A P. I actually hit Facebook's AP and get it results back so you can actually shortcut this method, which means that we can again go back to marking things and test that whether our services are working Esper our own requirement or not without even doing all of those a thing functions. So let me demonstrate how easily you can do that. So we are going to create one more pissed for R A p a. Now, this would be that mark test. Okay, So test for G s, okay. Or life? So what do we want to do with it? In our market test, we are not well, actually hit the server. We are just going toe past whether our search function is getting court properly without even getting the servant. So in this one particular case, you don't really have run that Sarah in order to cast the functionality off our a p a. How can you do that? Let me demonstrate their So, first of all, we are going to mark this fetch potion. OK, so this is a French conscience, right? Which is coming from Lord fits. OK, so we're going to more this fetch function, which means that it is not actually going to hit this local hope 8000 you are, and it is just going to equal the result or the object which we are going to provide it. Okay, so first of all, let's get this tape in Gwadar port. Then again, we have to get the eat a food as then because it is the thing which we are going to use. Then he can mark this entire patch more Do like this. Okay, now we can attach also satisfy. We can provide fake implementations and weaken provide fake resort venues because it is, ah, promise price so it can actually resort to some venues. So we can even tried fake and his or value which we are going to do in art mark test Soviet right the past year and let it be not getting the actual server. Okay, so it is not really the actual servant. And I was just show you that I'm going to shut the summer down. And even after doing that, this Jack will succeed soul the pitch. Sure resort to this, Jason. No, from just. Yeah. So this is the result which, according to fetch, will output. So the fact is going to be resolved, this value and not this value from the life server. Okay, so it is not actually going to hit the lifesaver now because we have already marked it. And then we can just use this similar statement we have written are the okay. Now, we're not going to provide the processor because, as you know, that we have more the fetch module. So it won't be having any Jason passing capabilities now. So it is just a dummy element now, so we can actually passed up Jason Processor, which he passed in our best like this. We cannot do that anymore. Okay, So and we are actually capable enough. Even after is keeping that Jason passing move. Because it is just going to use this thing now because processor is not provided in our call now, right foot just will put it returned a little from this, and it is more. It is simply going to be resolved toe this thing. Okay, so let me just like this, then close. And then again, we're going toe, right. Our condition here expect the last book result. Vetch and port. It should written it. Should her that this late so drastically test this yon run just then it hit a wall, and as you can see, that it has passed. Let me just shut the suburb down. So there nothing gen building in the background. And you can reconfirm it by running this command Lupul host. And at 8004 and as you can see it can connect, but it's still if you are going toe run, our test is going to pass, as you can see, So it is not actually hitting the somewhat now. But at the end of the day, we are sure that our court is working s for our requirement without even hitting or performing any sort of easing function. So this is much faster as compared to testing the live application so we can see if sometimes by marking things which are actually implemented in an A think way with this approach. So now we know how to test an A p a. Both using live matters and using marks. 7. Bonus Chapter - Test Coverage: So there is one more topic left that this discovery now Discovery. It's an inside about how much off your court is actually covered with tests. So, John, you can easily do. They're choosing John and then run just and coverage. So this command, there is some problem. So this is the come on. So it will tell you how much off your court is covered with test. Okay, so you can go to just and let more about how you can read all of this information and how you can use this information to covered all off your chord with test cases. So as you can see here that there are red lines. So it is indicating that some off the court is not actually covered the test cases so you can learn more about such things using just documentation. And then you can no do your own excursions into this test coverage feel. So we have reached to the conclusion off our mini course about testing JavaScript applications using just I hope that by now you feel confident enough inviting tests using just a river in kids who have any board out. Make sure to leave a comment on this video