Mocking Asynchronous Functions with Jest

[@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!

[@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.

[@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!

[@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.

[@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

[@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.

[@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

[@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.

[@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.

[@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.

[@SwOOp_de]

Great video...thanks for explaining jest mocks.

[@CristianAndresNietoGarcia]

An excellent resource in my current journey in Unit testing

[@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.

[@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 :)

[@kiberslav]

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

[@alfredmadere9030]

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

[@emmanuelsackey3026]

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

[@SwashbucklingwithCode]

Thank you.

[@hhdev9954]

Very good explained 💡, thank you Jimmy!😊

[@SwashbucklingwithCode]

Awesome.

[@Bregylais]

Subscribed, liked, and alas commented. Beautifully explained!

[@bikizzle]

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

[@Andrans1]

Amazing tutorial, thanks for sharing your knowledge

[@claudiobaumgartner2760]

Super interesting! Thx for the nice tutorial 🔥

[@JoseciusDev]

Thanks for this content. (from India )

[@gordemn]

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

[@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.

[@OhReallyHuman]

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

[@santhoshraghavpidathala3701]

Please continue to teach jest and react testing library

[@matthieu1551]

Very interesting. Thanks a lot 🤩

[@j.ignacior.p.9481]

Awesome video. Thank you very much.

[@Huey-ec1]

Great explanation

[@aashisharyal9704]

Amazing 👏👏 Thank you so much 💕

[@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.

[@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

[@programandocomandersonsouza]

Excelent. Thank you so much.

[@zacalves]

great tutorial! thanks a lot for that!

[@dharmsingh6924]

Nicely explained 👍

[@el.vilchez183]

Thanks Jesus for teaching mocks :D

[@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

[@haralc]

Thank you Jesus for this tutorial! 🤣

[@johannyberg4988]

Good job!

[@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.

[@shwackthenoobsac]

Thank you!

[@SwashbucklingwithCode]

Happy to help.

[@DevTomazetti]

Awesome video! How can I mock the error case?

[@lifeisbeautifu1]

Thank you

[@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.

[@HarelTussi]

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.

[@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

[@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

[@PrieyudhaAkaditaS]

Thankyou

[@SwashbucklingwithCode]

Thanks for stopping by. Best of fortune to ya.

[@oscareberle744]

Thanks Jesus for this video! :)

[@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.

[@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.

[@sauravthakur6261]

make a video on redis mock get set functions

[@WebDevwithTed]

So mock is to test it "fake" and then end to end for real test?

[@Nurtylek]

great!

[@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).

[@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.

[@80Vikram]

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

[@elsetiyawan]

I feel like Jesus teach me testing.

[@methmaaravinda5107]

oh jesus

[@moacirsouza5343]

Jesus!

[@reasonforge9997]

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

[@SwashbucklingwithCode]

I see what you did there.

[@shadev23]

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

[@yashkaliapiano]

Jesus teaching software 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.

[@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