React Testing Library Tutorial #13 - Mocking Requests

in the last video i suggested that the way that we've been doing things is probably not the best idea and let me just quickly illustrate what we are doing right now for each test we are making a request to an external api now this api could be just whatever api that we found on the website or it could be our own api it doesn't matter we're making a request to it and then we're getting back some data now i'm going to suggest that this is not a good approach some people say that this is actually great because now we can test our react application as well as the api but i don't think this is a very good approach for a few reasons the first reason is that requests cost money and to be honest in a real production application you're going to be running your tests over and over and over again and if you have a huge application that's making a lot of requests that could cost you a lot of additional money and that is not a great idea now over here we're using an external api so it's not going to cost us any money but it might cost them money and you know they're probably not going to be happy with that so that is the first thing requests cost us money the second thing is that requests are slow for each test we have to go ahead and make a request and then wait for the data to come back and i've worked on applications that have thousands of tests and if we had to do that i might have to wait a day or two for all of the tests to run successfully so requests are really slow and this can be very problematic when our tests are continuously making requests now the last thing and i think this is the most important reason why i don't like this approach is that our tests are now dependent on something external so right here we really just want to test out our front and react application we do not want to test out anything else but if we make these http requests and we rely on data coming back then we are testing out the api as well and if for some reason the api fails then our tests will fail and that's going to cause our tests to be very flaky and they won't really increase the confidence of our application so what i suggest doing is instead well just focus solely on the react and test just the react and if you have an api then just test the api in complete isolation so you're going to test the react app in complete isolation and then you're going to test the uh the api in complete isolation and any interaction within that you can just mock that interaction so for instance instead of actually making the request and getting back the data what we can do is we can completely omit the api and we can just make a mock request so we can make a mock request and just get back some dummy data that would be sent back typically if the api sent us so the data would have the same structure so we can just mock it and that is the approach that i recommend taking just mock the data that you get back so we don't have all of these other issues that we have talked about so to implement a mock inside of our react application we have to figure out what we want to mock now if we go to the follower list component what we want to mock is the axios dot get call we don't want to actually make that http request and get back data instead we just want to mock it and get back some dummy data that conforms to the data that we get back from this api so if we actually just do a quick console.log to the data and let's go to our let's close that let's go over here and you can see that this is the data that we get back let's do a quick refresh you can see here that we get an array that has or an object that has results and then in the results we have an array of the people and inside is an object and here we have the login information that contains the username and that's what we're using over here we're also using the name so the first and last so first and last and then we're also using the picture.large to get their image so we're going to mock this we're not going to mock every single piece of information because we're not using it but we will be using the login.username we'll be mocking the name.first and last and then the picture.large so let's go ahead and mock this and remember we want to mock the axios call now with jest we can mock things very easily so all we have to do to mock things is inside of the source directory create a underscore underscore mox underscore underscore and note that the name of this is extremely important so let's just go ahead and create this and then in here we're going to create a file of what we want to mock now the file name has to be exactly the thing that we want to mock now we want to mock axios now notice right now we have 12 tests passing so we want to mock axios we're going to say axios dot js so once we do axios.js we are going to be mocking axios.js and you can see that our tests now have failed because well we're mocking axios js but we're not returning back any data so let's just go ahead and let's just mock axios and return back some data now we want to export default and object and then what we want to do is have the get key because we're not going to be making just axios call we're going to be making an axios dot get call and then in here what we can do is just mock some data so we can just say that hey this is going to be a mock function a just function and then we're going to do mock resolved value and then we're going to pass in the mock value in here so i can just create another variable and do something like const mock response then we can say something like data and then results and then over here we can have an object and i'm going to put the name and then here i'm going to have first remember this is the same structure that we get back from our api if we didn't mock it so we have uh first i'm going to actually give it a real name lathe and then last that's gonna be hard and then over here we're going to do the picture so the picture and the picture we're gonna say large let's just get a random picture from this api so let's go here and let's just copy this link and paste it in there okay so we got the picture and then the login so we want the username from the login object so we're gonna say the goat the phone he goes really i'm not really the goat on the phone you go here we go okay the phony goat okay cool so now what we can do is we can go ahead and pass that in but now notice something so this is still going to fail and it's not going to mock our data now the the um the first the second test well this makes sense because now we're only returning one so we can actually just comment this out and because this will always fail even if we mock it correctly but this one well we expected this one to pass now the reason why this is not passing is because react by default is resetting our mock every single time and i've done extensive research as to how to find this and i found that or how to fix this and i found that the only way of doing it thus far is just working doing something with the node modules now typically i don't recommend touching the node modules at all but for this case i just say go to the node modules and then find the react scripts what we want to do is we want to say hey we don't want you to reset the mock every time we want to set that from true to false so we're going to go here into the react scripts into the scripts directory into utilities and then into create jest config and then in line 69 we want reset mox to be false and now what we can do is just restart this and then we can say npm run test and then our tests actually pass now again this is not the cleanest way of doing things and i really haven't found another way of successfully mocking our application if you have another way please link it to me in in the comment section or give me a message uh so you guys can maybe help one another out but i really don't i couldn't find another way of doing things so just change this to false and now you can see that our tests pass and to double check what you can do is screen dot debug and what this does is it console.logs the element so we can do a screen.debug and just to see that that data that we got back is is mocked you see here we have lathe harb the phony goat and this right here is a far far better approach than actually making that http request all right so that is mocking data in the next video we're going to be talking about some of the different hooks that we get in jest

Channel: The Net Ninja

Views: 47,453

Keywords: react testing library, react testing, react testing tutorial, react testing crash course, tutorial, crash course, react testing library tutorial, how to test react, unit testing, test, testing, react tests, RTL

Id: TBZy-Rc-xX0

Length: 10min 29sec (629 seconds)

Published: Thu Jul 15 2021