Mocking Asynchronous Functions with Jest

Mocking is a fundamental skill in testing. It allows you to avoid testing parts of your code that are outside your control, or to get reliable return values from said code.
00:00 - What we'll cover
01:00 - Reviewing the project setup
03:02 - Creating the test
06:24 - Adding async await to pass test
07:17 - Why mock an api request for unit tests
08:32 - Adding jest mock for axios
14:06 - Check if mock function has been called
15:31 - Shorthand for mocking resolved promise value
16:23 - Gotcha for mock state, and how to clear it each test
18:24 - Alternate way of mocking within a test file
20:50 - Wrap-up
Repository for code example:
github.com/Jimmydalecleveland...
Blog Post:
blog.jimmydc.com/mock-asynchr...
Swapi Dev:
swapi.dev/
Follow Jimmy Cleveland's doings:
twitter: / jimmydcleveland
blog: blog.jimmydc.com/
#jest #mock #async

[@sharonfitzpatrick5179]

This is by far the best video I've found explaining mocking Jest

[@SwashbucklingwithCode]

Awesome, I'm glad to hear that.

[@ShubhamKumar-mk6zb]

I prefer blogs over videos, thankyou for making one and very understandable.

[@mateuszszaowicz4373]

This is the best video about mocking I have encountered, it really made me understand how it works. Big thanks to you sir!

[@imekachi]

Thank you for taking us into traps and teaching us how to escape/fix them. Short, precise, and easy to understand, also with sections that you can jump around and quickly learn what you need. 👍 Amazing.

[@SwashbucklingwithCode]

I appreciate the feedback and knowing that the effort was useful. Cheers!

[@jonathanlinat]

This was the most useful video I ever watched about mocking functions using Jest. You've made it pretty simple to understand the concept. Nice job Jimmy!

[@Andrans1]

Amazing tutorial, thanks for sharing your knowledge

[@kiberslav]

Very Useful video. Nice explaining 👏Thank you. Please keep it up with testing videos, this is gold.

[@ClareBeany]

Thank you for being detailed and nuanced in your explanations! Really helps give context and bridge the learning curve that isn't always addressed in documentation. This is great!

[@SwashbucklingwithCode]

I really appreciate the feedback.

[@tachylamurray9452]

God Bless you or whatever. I lost a whole day trying to figure out how to call my test async. So true how "it might not be so obvious to some" Thank You!

[@SwashbucklingwithCode]

Happy to have helped.

[@jimmymac601]

I will personally hunt down anyone who downvotes this tutorial. Outstanding presentation.

[@SwashbucklingwithCode]

Haha, ty.

[@arfasaif6139]

one of the simplest and well-explained clean video of jest mocking so far! thanks!

[@SwashbucklingwithCode]

Thank you for the kind words. Always nice to hear that your efforts were appreciated.

[@CristianAndresNietoGarcia]

An excellent resource in my current journey in Unit testing

[@saprone8885]

This is great and helped me a lot understanding async mocking and got it working in my own project! I am happy thanks for this :)

[@viridianite]

Thank you so much, Jimmy! You're slowly demystifying testing JS code with Jest for me!

[@SwashbucklingwithCode]

That's what I like to hear. Thank you for letting me know.

[@viridianite]

@@SwashbucklingwithCode You've a talent for pedagogy. Thanks for your video on asynchronous JS. I'm looking forward to your future videos :) I've a few topic suggestions: * REST API using express.js and some database library This could be a multiple parts series like your CI/CD series. You could show how you'd write the tests for it (e.g., unit tests, integration tests, and e2e tests), consume it with something like Axios, etc. * GraphQL API

[@LeoMuzi]

Thank you so much! This is really useful to understand how mocking works under the hood, helps you thinking of what's going on to figure out issues with testing. Helped me a lot.

[@SwashbucklingwithCode]

lovely

[@aglowkeys]

Thank you! This was so useful to me. Gonna be watching some more of your Jest videos now. :)

[@SwashbucklingwithCode]

happy it was useful. ty for letting me know.

[@vikram87in]

The way you teach is fantastic! And yes, this is the best video on the topic.👏👏 Thank you so much

[@SwashbucklingwithCode]

I really appreciate that, thank you.

[@claudiobaumgartner2760]

Super interesting! Thx for the nice tutorial 🔥

[@Alan.livingston]

Needs to be more stuff of this quality on the net. Most explanations are too simplistic and are aimed at people with no experience.

[@SwashbucklingwithCode]

I agree, and thank you. I can empathize more now with the lack of intermediate videos because they are quite challenging to figure out how much explanation to put in without making the videos crazy long.

[@hhdev9954]

Very good explained 💡, thank you Jimmy!😊

[@SwashbucklingwithCode]

Awesome.

[@bikizzle]

Thank you for this life saver video. This is great knowledge shared

[@petergoodey]

We have struggled with axios mocking on a complex React/Typescript project having only recently up-skilled. Best explainer!

[@SwashbucklingwithCode]

Thank you for the kind words and I'm happy to hear your skills are improving.

[@j.ignacior.p.9481]

Awesome video. Thank you very much.

[@giachan4528]

this video is short and easy to understand, please make more videos for unit testing, it is helpful for a beginner like me. Thanks!

[@SwashbucklingwithCode]

Glad it worked for you.

[@matthieu1551]

Very interesting. Thanks a lot 🤩

[@gordemn]

Wow I was really struggling with this but got it to work thanks to your videos. Thank you js Jesus

[@Bregylais]

Subscribed, liked, and alas commented. Beautifully explained!

[@dharmsingh6924]

Nicely explained 👍

[@alfredmadere9030]

Great vid bruv. Make another about standard practices for mocking models and such

[@zacalves]

great tutorial! thanks a lot for that!

[@programandocomandersonsouza]

Excelent. Thank you so much.

[@aashisharyal9704]

Amazing 👏👏 Thank you so much 💕

[@johannyberg4988]

Good job!

[@emmanuelsackey3026]

Thank you. You earned a subscriber at "Sanity check" . Awesome bro.

[@SwashbucklingwithCode]

Thank you.

[@santhoshraghavpidathala3701]

Please continue to teach jest and react testing library

[@mubashirarif5792]

Sir big fan...CodeStackr named you in his video on monday and I am since then loving your content....

[@SwashbucklingwithCode]

Thank you, I greatly appreciate that.

[@shwackthenoobsac]

Thank you!

[@SwashbucklingwithCode]

Happy to help.

[@santhoshraghavpidathala3701]

Thanks a lot, I am about to ask jest and react testing library. Could you please teach promises with API not with settimeouut function

[@Menhoka]

Awesome video! How can I mock the error case?

[@adrianjason13]

Helpful content, thanks! What VSCode extension are you using for intellisense/autocompleting Jest code?

[@SwashbucklingwithCode]

I believe that was shown in a previous video in this videos playlist, but it comes from installing @types/jest

[@OhReallyHuman]

"...test properly fails..." that line is hilarious and scary at the same time haha.

[@el.vilchez183]

Thanks Jesus for teaching mocks :D

[@suryapratap9915]

@SwashbucklingwithCode Thank you so much for the in depth explanation. What if my function is having multiple axios calls and these axios calls are wrapped in another function called 'makeApiCall'.

[@SwashbucklingwithCode]

If you have a function that abstracts all the fetching, it actually makes it easier to mock because you can just mock that module itself. Just make sure it is exported, and I usually put it in it's own file.

[@harel2021]

Awesome content, can you please upload more videos on jest and react-testing-library

[@SwashbucklingwithCode]

Unit Testing and Jest are likely the next series I'll be working on. I've had a few requests for testing-library, so I'll probably throw that in the mix.

[@Nurtylek]

great!

[@haralc]

Thank you Jesus for this tutorial! 🤣

[@PrieyudhaAkaditaS]

Thankyou

[@SwashbucklingwithCode]

Thanks for stopping by. Best of fortune to ya.

[@mahmoudnasser2158]

What about if you have multiple gets to different endpoints and each return different information? How could you mock each api get separately to tell Jest “this is the data you should expect for api A but another data for API B”?

[@ErikBackman242]

e.g. mockimplementationonce

[@sameerizaj5458]

sir please answer me the thing is the api part i did understand the thing is i'm a backend dev right so i'll be testing the endPoint via your method right i'll not actually call the function since it'll be a endppoint and second thing is that what if i want to mock the function that interacts with mongdb and returns the promise so my question my team lead said you don't need to import the mock service file in which just mock the functions so that means that i''l allo do the same like just resolved the value that function return and also in my some spis i've very complex data like array which contains the objects and each might have the array nested so that's why i'm asking please help me i've deliverd the project tommorow

[@y_thedreamer95]

which font do you use at WSL? it looks awesome!

[@SwashbucklingwithCode]

Cartograph Mono CF.

[@creative-commons-videos]

Not always a response have success but sometimes it throws an Error too, so how can we mock the errors and handle it ?

[@SwashbucklingwithCode]

Lovely question. I'll likely do a part 2 of this video for error states and multiple endpoints. In the meantime, I'm sure other comment readers would love to here your (and others) answer after you take a stab at it.

[@mohammedamin6859]

awesome stuff man, can you create react-centric testing tutorials?

[@SwashbucklingwithCode]

I've been pondering on that for a little bit. I've had a few requests, but I'm not sure how much I'd be stepping on Kent C Dodds toes, since I use his library and he has a bunch of tutorials for it. Thanks for the request, I'll definitely be thinking on it.

[@sivaram7115]

what if we have 2 get api calls in the react component. How to return different values for both

[@SwashbucklingwithCode]

I believe you can down some narrowing based on the endpoint path, but how I prefer to handle this is make a module that exports a bunch of api calls as functions. I name them based on what they do. This way, you can mock the entire function.

[@oscareberle744]

Thanks Jesus for this video! :)

[@Emma-eb5zb]

How can I test a function that calls multiple other functions?

[@SwashbucklingwithCode]

You'd call it just the same as any other function. You likely should individually test those subfunctions as well. The only real issue is when there are side-effects happening with any function, and that's a situation where you either should mock or rewrite the function to not cause side-effects (depending on limitations).

[@sauravthakur6261]

make a video on redis mock get set functions

[@EulerAlvarenga1]

I'm using typescript. When I call the real api the test works but when I call the mockImplementation it always returns undefined =/

[@viridianite]

You should be resolving the returned promise to some value. By default, Promise.resolve() resolves to undefined.

[@aspirinemaga]

Very informative, but it seems won't work in my case for no reason

[@Chavez3d]

is lemmy kilmister your dad? also great video, sub'd!

[@cla1814]

you should post source code in the video description.

[@SwashbucklingwithCode]

In most videos I do, but this one was based off a blog post which has the required code. The complete test code is at the bottom, but I could see how it would be more convenient to have files to follow around.

[@SwashbucklingwithCode]

Added this in the description, thanks for letting me know: github.com/Jimmydalecleveland/jest-mock-async-example

[@cla1814]

@@SwashbucklingwithCode Always good idea to post code, even if at least github gist, that way If someone is coding alone can compare their code or save it for future reference.

[@methmaaravinda5107]

oh jesus

[@elsetiyawan]

I feel like Jesus teach me testing.

[@erenyeager7465]

Jesus

[@hendra5604]

First ☝🏻😅

[@SwashbucklingwithCode]

You are indeed.

[@hendra5604]

@@SwashbucklingwithCode What theme used there? Deep ocean?

[@SwashbucklingwithCode]

@@hendra5604 This is actually my own theme called Everset. marketplace.visualstudio.com/items?itemName=jimmydc.everset

[@hendra5604]

@@SwashbucklingwithCode Perfect, many thanks. I just hated purple's around material theme. Created my own theme for personal use, had hard time to distinguish color between html, json, php, ts/js, py, yaml.

[@reasonforge9997]

Lots of mocking in this video...but it's all in Jest.

[@SwashbucklingwithCode]

I see what you did there.

[@80Vikram]

Jesus is real and he loves TDD. Thanks for saving developers' lives US Jesus

[@yashkalia4767]

Jesus teaching software testing

[@shadev23]

Jesus ???? It's you ???

[@serial_coder]

Jesus Christ

[@jimlatsko4804]

Can you please help with converting this to typescript? Specifically the line mockAxios.get.mockImplementation(() => Promise.resolve({data: {name: "Jimmy Jedi"}})); since mockImplementation generates the following compiler error: TS2339: Property 'mockImplementation' does not exist on type ' >(url: string, config?: AxiosRequestConfig) => Promise '.

[@jimlatsko4804]

With help from stackoverflow, got this working: here are some changes to consider for typescript: import axios from "axios"; const mockAxiosGet = jest.spyOn(axios, 'get'); mockAxiosGet.mockResolvedValue({ data: {name: 'Luke Skywalker'}});

[@SwashbucklingwithCode]

Have you already installed @types/jest ?

[@jimlatsko4804]

@@SwashbucklingwithCode yes.

[@SwashbucklingwithCode]

@@jimlatsko4804 Hmmm I don't recall getting an error in TS for mock methods. You might have to set axios with teh `as` keyword to jest.Mock or something like that.

[@EulerAlvarenga1]

I had the same issue, With help from stackoverflow, got this working: here are some changes to consider for typescript: import axios from 'axios'; // import axios instead of mockAxios jest.mock("axios"); const mockedAxios = axios as jest.Mocked // head up here, I changed the name of the var