Check out a free preview of the full Intermediate React, v4 course:
The "Mocks" Lesson is part of the full, Intermediate React, v4 course featured in this preview video. Here's what you'd learn in this lesson:

Brian creates a test for the API data coming back from the server. A mock request is used to eliminate the need for the API to be called which can slow down the test suite and cause unnecessary load on the server. The mock is then passed into the custom hook.

Get Unlimited Access Now

Transcript from the "Mocks" Lesson

[00:00:00]
>> Let's test fetch. So this is great. This test that if we give us breed list, nothing that it gives us back an empty list and an unloaded state. That's exactly what I would expect from it. But that's not really the point of views breed list, use breed list.

[00:00:18] If I give it an animal I wanted to call the API and give me back a list of breeds. That's actually the point of it. So lets go a head and make it do that. I want to install another library here called just fetch merch impairment-D, just-fetch-merch@.3.0.3 This is just a little package that's going to mock out fetch for us.

[00:00:50] We can tell it. We expect to be called with this. We expect it to be given back this. Okay, I want you to go to your package.json. And we have to add a little configuration down here at the bottom. We gonna say jest, we gonna say auto mock false.

[00:01:12] So don't automatically mock everything. That was a dark time when Jest used to do that all that, when it worked it was fabulous but most of the time it didn't work and it was horrifying. It demoed really well though, people got really stoked about it. Anyway, that's a history lesson that I would need several more beers to tell.

[00:01:33] And then set up files. Basically you can say hey just before you run test run this file to set up my environment. So we're going to make one in source called Source/setup jest or whatever you want to call your file .js. Now just we'll run this file before any of your other files to make sure that you can set it up.

[00:01:59] Okay, cool. That's all nice. Don't put this into the test directory, right? Because if you put in the test directory, just is gonna think it's a test. So don't put it in there, we have to put in just our normal source directory. This is gonna be called setupJest.js or you could make another folder called like test helpers or something like that, whatever you wanna do.

[00:02:23] This is gonna be super short, we're gonna say import, enable, fetch, mocks from just fetch mock. Then just enable it. That's all, you just run the function. It's going to basically patch in that Jes time environment. What fetch is supposed to do. So then that we can basically control how fetch responds to our use breed list.

[00:03:00] All right, so go back to our use breed list test. Okay, down underneath this one we're gonna give it another test. This one's gonna be say, gives back breeds with an animal. Make sure that that is async. Okay, tell about the breeds that you care about. We'll just give it a list of breeds.

[00:03:27] You can put whatever you want in here. I'm gonna give it Havanese Bichon Frise. Poodle, Maltese. Golden Retriever. Labrador, and Husky. Okay, so just a bunch of dog breeds. Okay, and then we're gonna patch the fetch implementation to say fetch.mockResponseOnce. And then we're just going to tell it what to give back whenever the next time fetches called.

[00:04:15] JSON.Stringify. Animal: dog and breeds. We're just mocking with that, API response looks like. We could get more technical here, we could test that it calls the right URL with the right parameters. In reality all it cares if it gets back the correct information that it's given it back to me correctly.

[00:04:42] Okay, so here I'm gonna save fetch sorry. I did that already, we're gonna do say const result and wait for next update. This is just a nice little helper functions is like wait until react like all its dust settles up at three renders, right? And then check. I think this is actually a promise.

[00:05:08] We'll check here in just a second render hook. Same thing up here but we're gonna give it us breed list, and we're gonna give it dog. This is a some sort of function, it's a function that returns a promise. That's what it is. So you say wait for next update.

[00:05:33] That is a promise, right? That doesn't return anything. At this point, we can be guaranteed that result. Whatever result is, is going to be what we expected. So we can say const pre list status equals result.current. Expect status to be loaded and expect breed list to equal, Breeds.

[00:06:17] Now important that this is not to be it would check to see is do I have literally the same array which is actually, we don't care about identity here we just care about equality. You can give me back to different arrays as long as they contain the same things does every literally the same array.

[00:06:35] Actually, this might come back to be I don't know how it works underneath the hood, but doesn't matter to me. I don't want to test that. Mpm run, Test watch, and it passes. So that is how you test fetch. Questions? All right, in the past have actually written code that actually will hit the API or it will like spin up a fake API and like hit that, just mock it.

[00:07:19] That's nine times out of ten what you care about anyway.