Mocking Fetch Using jest-fetch-mock

hey how's it going everyone its Leigh Holliday and in this video we are going to learn how to test code that makes a call to fetch so we're going to learn how to test fetch but also how to mock out fetch so that it doesn't make real HTTP requests all the way across the internet which is a slow B you get sort of responses back that you may not be expecting for example this is a function which converts some currencies say USD to CAD but the currency rates always changing so it's very hard to test and get consistent responses so this is part two of a very short series where we're talking about testing fetch working with mocks ingest in that part one we did everything sort of manually by sin by scratch in ingest but in this video what we're going to be doing is working with a library called just fetch mock that does a lot of a heavy lifting for us and is a lot easier to work with so you may think well why don't you just start with this but I think it's good to sort of understand sort of underneath the covers how things are working before you use a library that does all of the hard work for you so first thing I'm going to do is install just fetch mock and after you install this library what you need to do is go into this we're in create react up it's got a file called set up tests that's run sort of anytime you're you're running your yarn test command and here's where you can do global stuff that's used across all of your tests so we what we need to do here is import fetch mock from I always forget the name of this package just installed it just fetch mock chest fetch and we need to tell it to enable MOX so for all of our jest tests don't use the real fetch mock it out so that we can have sort of fast consistent pretend HTTP calls so with the setup done our package installed let's get these tests running and we'll go in and write them so just to review quickly what this function does it makes it call to fetch it converts the response into JSON and then it accesses the rates and then specifically the destination currency so CAD in our case but if it sees a rejected promise or an exception here it will catch it and return null so we're going to test a the happy path and be the failure path cool so I've already set up a file currency TAS TAS I've already imported our convert function and we're gonna write our two tests so it converts correctly like this we'll pass an async function in here and we will make a call and get it response so con straights is equal to convert from USD to CAD I forgot the weight because it returns a promise and then let's test that it is equal to one point four two so if this runs I believe it should fail still and that is because we haven't told fetch what value to to respond with in our fake response so we receive null meaning it didn't really work so prior to calling the convert function what we can do is we can go in to fetch and we can say mock response once so what respond what fake response should fetch receive and we eventually want an object that looks like one point four two like this but I don't think that works let's see maybe it does know and that's because in this code it gets the result and then it calls result dot JSON so what's it doing in here it's basically taking a string and it's JSON parsing it so what you need to do is actually pass in a JSON string so we need to json stringify this object here so we've told fetch sort of what to do what mach response we've called our code and then we've tested it that it works and all tests pass we can add a little bit more here where we can say expect fetch to have been called x once so if it's important for you to to test how many times fetch was called you can do this here and then you can also say expect fetch to have been called with you can even pass in sort of what parameters were passed to it when it was called so if we look at our actual implementation here it's this URL that will just come back here and paste so if we sort of make it fail first which is always a good thing euro it should be receiving USD here so I believe it will fail and it will say we expected to receive euro but we actually received USD which is correct so we just update that and it should work now cool so we've tested the happy path let's test the sad path to failure path so it catches errors and returns null so this is an async function just like the above in this case we are going to say fetch mock reject so just mock a rejection so promise dot reject API failure like that I actually don't even think you need I think you can just pass him this we'll see okay so we said our out sort of pre executing our code we'll call our code now so conce traits is a wait for the convert function to go from USD to CAD and because our fetch is going to reject the promise what we can do is we expect rates to equal null and if we want we can also put this down here too because those should be the same but probably that's not needed and no aah actually this is good that it happened actually so I believe this codes fine but here we tested that it should have only been called once but you can see here it said we received two calls so why was that the case and that's because this macht fetch function is sort of carried and used in both of our tests what we want to do is sort of make it pristine again prior to each test so what we'll do is we'll say V for each run this code and we'll take our fetch and we will call reset mocks so what this will do is basically set everything back to the initial state between each of these tests and now our tests all pass again so we covered how to handle the happy path with mock response once the the sad path of failure with mock reject we looked at how to test how many times our mocked fetch function was called what did it receive when it was called and we also learned how to reset it between each of our tests there's one more thing you can do what happens if your function was calling fetch twice and that was actually expected so instead what you can do is you can say fetch um mock responses responses and you can actually pass in an array of responses so each one has a body like that actually let's go look at the docs so jess fetch mock mock rest once's so each one okay so we still need to stringify here and then it's a second one it's a little strange but I was doing it wrong so each weddin is an array where the first one is your stringify drous Ponce first value of your array the second value is you can override like the status if you want to have like a 404 or something like that so if it works took a while I don't know why but we'll hit a to run them all again cool lot faster this time we basically this one is just for once but if your code is making multiple federal calls you can mock multiple responses sort of passing one or more arrays we were only calling it once but imagine you had many of these where you pass another array of these these two pairs and you can handle on your first call block it this way on your second call mock it that way you can also like conditionally mock like mock it if the URL looks like this or if you were passed these parameters etc but I will leave that up to the viewer to go and check out the documentation to see how that works so hope you enjoyed this video how to mock fetch calls and test them using this library called just fetch mock have a great day everyone take care

Channel: Leigh Halliday

Views: 16,570

Keywords: javascript, javascript tutorial, tutorial, javascript testing, javascript fetch, jest fetch, jest mocks, mock fetch, javascript mocks

Id: yhUep7E9O20

Length: 10min 26sec (626 seconds)

Published: Sat May 16 2020