#5 Mock Functions & Why - React Testing For Beginners

hey what's up this is Scott with level up tutorials and in this video going to be talking about just mock functions and we're gonna break down some of the concepts around why you would want to mock a function and spy on that function as well again these are some of these core concepts and vocabulary words that we're going to be using throughout this series it's stuff that you're gonna need those foundational knowledge for when we start testing our react components so let's get going on that as we create fake functions using a chest mock so in this video is where things might go off the deep end for you just a little bit and I'm gonna hopefully make this immediately obvious what's going on why we're doing it and how it could be advantageous so what we're going to be doing is showing you how we can mock a function okay and this example is going to be a little crazy because you're not necessarily gonna see the benefit out of it exactly but that's okay all we want to focus on is the implementation right now and I'm going to comment out this test total we're going to be testing is simply the add function however we're not going to be having access to the add function and therefore this whole test will break add is not defined now what we want to go ahead and do is export or I'm not export we want to create a new variable and this is going to be constant now what this is going to be equal to is a just dot F n okay so this is going to be really interesting here where if we just simply do just FN you can see that we're still receiving undefined here and things break however what we're not getting is we're not getting the error where ad itself is not defined ad is now defined it's just an empty function and this might merely strike you as being weird right well why the heck are we having an empty function more importantly well why are we having an empty function that isn't actually doing anything why are we testing this empty function well the overall goal here eventually isn't for this to test the empty function itself but to test the function when we don't have access to that function right and so here this is not going to work because obviously we're not going to have you know who the three and seven be accurate but if we comment out one of these and then we say our just function is simply going to be an arrow function that returns three you're gonna see our tests pass now what I did there is I simply had a callback in this just function that determined what this function would automatically return at any time you ran ad regardless of which variables or which numbers you passed into it the answer is going to be three so it's not actually running ad at all so this is immediately sort of odd right because well hey what's going on here right well why the heck would we do this now some instances in which you're going to be mocking functions and that's what this is it's a called a mock function and again I'd like to give the jargony stuff out of here and for the most part it doesn't matter at the end of the day a mock function is a fake function that's going to give you some results now these can be async these can be synchronous they can return a promise they can return some data they can do a whole bunch of stuff for you and you can even load a function from a dependency and turn it into a mock for instance let's say I had a database call and I don't actually want that database call to hit the database well in some of these instances what I could do is actually load up that that call and then turn it into a mock and then what we could determine is that that function would even be run okay so this is all sort of funny let's go ahead and try this in another example here so in the next video what am i doing is trying the same thing in a more practical example because all i wanted to get out of this was to show you that we could use just dot FN to create a fake function and this fake function is going to be here now another interesting test we could run here let's go ahead and get this one at least back to the way it was and comment this out we could use this sort of test to make sure this function was even called we could say expect add and then we could not export expect it's funny my hands are just so used to typing that and we could say expect to have been called and even though the text size on this is a lot of times what we want to be saying is to have been called times T I am es here and we wanted to say hey we expect that after we run this ad function we expect that ad was called one time okay which obviously is going to pass because we're calling it one time for her to call it two times you can see this has now failed expected mark functions to have been called one time but it was called two times now this is a function that we're going to be using or a method that we're going to be using a lot in react for instance when you click on something and maybe you have some method that's actually run maybe it's an API call or something like that you're gonna want to see if this is called one time so what we're gonna be doing is mocking the API call and we're gonna be checking to make sure that call was called and we can even check to make sure it was called with what so let's go ahead and get rid of this and we could say to have been called and then with now with is going to take a set of parameters and we could just say to have been called with two and one or one and two and you can see this is again passing now if I were to change any of this as then hey if we were to say to have been called with one and three this function breaks because well the argument or the ad wasn't called with these numbers now this is kind of in I don't know a dumb and asinine example here because we can see we're calling this right here but once we get into react when you click a button we're going to essentially fire off a click on that button we're gonna say click this button right and then instead of actually checking some of the the you know to see if the state has changed or something we're going to check to see if some of the functions inside of that have been called by saying hey we're gonna see if they've been called and we're gonna make sure they've been called with the proper arguments because sometimes arguments are coming in from form fields and sometimes they're coming in from props and sometimes they're coming in from different places and this way it's a lot less asinine to check this to see if it's been called with these things if the values are coming in from different areas okay so this video is really just going to be a sort of base skills that we're working with here and you can see that we can create our functions and test them just like this now we're going to be doing in the next video is we're gonna be testing the add function but we're gonna be testing it as if it was an external dependency of the the total function and it's gonna allow us to sort of unit test total in a way without actually testing add it's gonna be very interesting okay now again these are just some core skills here and once we get into react a lot of this stuff is going to totally click but what I wanted to do is technically click for you first so that way when we're getting into the theoretical stuff or how we're testing and react you don't have to even think about creating a just test function now again this can return anything you'd like you know if you wanted to you could even return x and y and return X plus y here and then of course this one's going to work as well and our all of our tests are gonna pass now but this right here is recreating our our code which is just totally ridiculous and totally unnecessary but again so what we're gonna be doing in the next video is we're gonna break things down into their own modules and then we're going to use just to mock one of the modules and we're gonna see exactly how that process works okay so as always this is Scott with level up tutorials I hope this is your first introduction to mocking again when I first learned about mocking I was thinking like I thought we wanted to test the code right not create fake code but there are some very real instances and where you're going to want to create fake code to have your tests perform reliably that's not to say you'll ever want to test a fake function you're mostly going to be testing something like an integration test and then adding in a fake function there so that test will pass 100% of the time and super fast ok so again these are just some core skills and I just wanted to get this technically out of the way so you knew how to create a just mock function okay so in the next video we're gonna do just that we're going to mock it an entire module rather than mocking just a function okay so thanks so much for watching you know see in the next one

Channel: Syntax

Views: 95,735

Keywords: react, testing, unit testing, ui testing, javascript, js testing, react testing, react testing library, enzyme, react testing library vs enzyme, react testing library tutorial, web development, jest tutorial, react tutorial, learn to code, learn to program, youtube coding, javascript testing, javascript for beginners, js testing jest, js testing 101 with jest, reactjs testing

Id: 2d-SX8YRyis

Length: 9min 16sec (556 seconds)

Published: Wed Sep 12 2018