How to Mock Fetch in Jest Manually

hey how's it going everyone is Lee Halladay and in this video we are going to test a function that uses fetch and specifically we're going to learn how to mock it and see how you handle all of that with jest what is mocking and why would you want to do it well when you're running your test there's a few reasons you wouldn't want to make real HTTP calls number one because they're a little slow so if you got a lot of tests they're all making calls your tests are going to take a while number two the responses aren't consistent in this case we're calling to get the rates converting a currency from say USD to CAD to Canadian dollar it's changing every day so you could never really write a test because you don't know what value you're going to get back number three whoever owns this API even if it's yourself may not appreciate getting a ton of API calls every time their their CI services is running through the test suite so that's what we're going to cover today testing this convert function ingest this is part one of I believe three short videos I'll release this one we're going to do it all manually ourselves just using jest and the second one we'll look at a better way where we use a package to to take care of the heavy lifting for us and number three we're going to look at what happens when you use or call this function from within some react code how can you test that react component that makes a call to a function that calls fetch so to get going we've got this currency file here I'm gonna spin up our tests in the terminal below so we can see the results and I'm going to create currency tests yes so in here I will import the function I'm testing so import convert from currency and we will write an it test so it converts USD to CAD and we will put our function in here that's run so the first thing we're going to need to do is make this a sink because we're dealing with promises here to actually the first one is awaiting the first wretch fetch response then once we have that we have to wait another as we sort of call the JSON function to convert that response into an object that we can deal with so what we'll do is we will call our function so const rate is a weight the converting of USD to CAD and then we'll write that we expect the rate to equal one point four two so if I run this what you'll see hopefully if it works the response we get back it expected one point four two but we got one point one one point four one will Allah and that's the actual exchange rate on today so we made the real API call we got back a value that's really hard to test for because it's gonna change all the time it's slow etc so what we want to do is replace fetch with like a fake mocked out version of fetch so there are a number of ways to do this ingest you can create a folder underscore underscore mocks underscore underscore but that really only works if you're importing a module into your code in this case fetch is available globally so what we're going to do is actually just access the global fetch and we're going to replace it with a fake version so we'll say we're gonna place this with just dot F n so this is a way you can sort of create fake or mock function calls ingest and what we want to do is think about in this case what this fetch look like so fetch returns a promise so that's the first thing we need to resolve a promise and the data it resolves with contains JSON which is a function that can be called and if we look here we get our risk we call JSON on it a weight which means it's another promise so we have to promise dot resolve again and then we need to think about what data were expecting to receive back so in this case it's an object with a rates attribute and then we dynamically access whatever destination currency we're working with in this case CAD so we respond with rates object CAD and then 1.42 like that so when this test runs again it now passes because it's not using the sort of standard global fetch it's using this mocked out function that we created here so because it's a mocked up function you get some additional sort of superpowers you can expect and test like how many times it was called what did it receive when it was called so we'll work on that right now we can say expect fetch to have been called times so one time right so if we say - we'll make sure it it fails and then we'll fix it in there we go so we expected - but it was only called once so if it's important to know that your code is actually executing or calling a function you can write a test for that so why don't we test the other side of this currency function where we see it's wrapped in a try-catch so if anything in here fails and raises an exception we'll catch it and just return null here so we need to mock out the promise being rejected so a failure so it handles rejection or exception with null so again we got async function in here and this time we need to override sort of this standard global fetch over right here so override the override and just change it just for this function or this test in here so what we can do is we can say fetch dot Mach implementation once so just override it one time and what are we gonna override it with we will override it with a promise don't reject so we just reject immediately we'll just say API failure so that's our setup we need to actually call the function we're testing so I'll wait a call to convert from USDA to CAD and let's check that the value we get back matches what we're expecting spec so expect rate to equal no so if we say this we can make sure that it's working as expected cool and we can also say expect fetch to have been called with so you can even test what arguments were passed to your fetch call as it was called in inside of this function here so I'm just gonna copy this string over and we can replace the variable here for base 2 USD and when we run this we'll make sure that it's still passing there we go so we in this test we overrode the global fetch to create a mocked version of it that sort of responded in the the normal signature we're used to dealing with the double promises in fetch we tested it once here sort of a happy path and then we tested that our function handles the failure path there's one more thing you want to do you might want to do is basically in between tests reset any mocks because you may run into issues when you're checking like how many times it was called if it's sort of retaining values between tests so what we can do is implement the before each function or yeah function that receives a function that's provided would just to basically do something before each time a test is run and what we can do is we can say fetch mock clear so basically start from scratch every time you run these tests and there we go it's all still passing so this has been video one how to mock fetch and test code that makes HTTP calls and in the next video what we're going to be looking at specifically is believe nope I deleted it but it's called like I forget what it's called it's a package specifically for testing code in fetch testing fetch ingest sorry that's a mouthful so we're going to take a look that and then the third video will be how can we test react components using react testing library that calls code that makes fetch calls so I hope to see you around for that I'll share the code and links in the bottom for you to sort of get access to the the code that I was going over here hope you enjoyed it take care bye

Channel: Leigh Halliday

Views: 38,200

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

Id: mHXhuPHiDj8

Length: 9min 45sec (585 seconds)

Published: Fri May 15 2020