Mocking Asynchronous Functions with Jest

Рет қаралды 67,679

Күн бұрын

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

Пікірлер: 114

@sharonfitzpatrick5179 2 жыл бұрын

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

@SwashbucklingwithCode 2 жыл бұрын

Awesome, I'm glad to hear that.

@jonathanlinat 8 ай бұрын

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!

@mateuszszaowicz4373 9 ай бұрын

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

@arfasaif6139 2 жыл бұрын

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

@SwashbucklingwithCode 2 жыл бұрын

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

@kiberslav 2 жыл бұрын

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

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

@saprone8885 2 жыл бұрын

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

@CristianAndresNietoGarcia 3 жыл бұрын

An excellent resource in my current journey in Unit testing

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

@Andrans1 2 жыл бұрын

Amazing tutorial, thanks for sharing your knowledge

@claudiobaumgartner2760 3 жыл бұрын

Super interesting! Thx for the nice tutorial 🔥

@ShubhamKumar-mk6zb 4 ай бұрын

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

@aglowkeys 2 жыл бұрын

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

@SwashbucklingwithCode 2 жыл бұрын

happy it was useful. ty for letting me know.

@vikram87in 2 жыл бұрын

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

@SwashbucklingwithCode 2 жыл бұрын

I really appreciate that, thank you.

@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

@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

@j.ignacior.p.9481 6 ай бұрын

Awesome video. Thank you very much.

@bikizzle Жыл бұрын

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

@hhdev9954 2 жыл бұрын

Very good explained 💡, thank you Jimmy!😊

@SwashbucklingwithCode 2 жыл бұрын

Awesome.

@Bregylais Жыл бұрын

Subscribed, liked, and alas commented. Beautifully explained!

@matthieu1551 3 жыл бұрын

Very interesting. Thanks a lot 🤩

@zacalves 2 жыл бұрын

great tutorial! thanks a lot for that!

@dharmsingh6924 2 жыл бұрын

Nicely explained 👍

@Huey-ec1 Ай бұрын

Great explanation

@aashisharyal9704 8 ай бұрын

Amazing 👏👏 Thank you so much 💕

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

@programandocomandersonsouza 11 ай бұрын

Excelent. Thank you so much.

@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 3 жыл бұрын

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

@SwashbucklingwithCode 3 жыл бұрын

Haha, ty.

@johannyberg4988 3 жыл бұрын

Good job!

@alfredmadere9030 Жыл бұрын

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

@giachan4528 2 жыл бұрын

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 2 жыл бұрын

Glad it worked for you.

@emmanuelsackey3026 2 жыл бұрын

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

@SwashbucklingwithCode 2 жыл бұрын

Thank you.

@gordemn Жыл бұрын

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

@santhoshraghavpidathala3701 3 жыл бұрын

Please continue to teach jest and react testing library

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

@shwackthenoobsac 2 жыл бұрын

Thank you!

@SwashbucklingwithCode 2 жыл бұрын

Happy to help.

@mubashirarif5792 3 жыл бұрын

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

@SwashbucklingwithCode 3 жыл бұрын

Thank you, I greatly appreciate that.

@OhReallyHuman 9 ай бұрын

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

@santhoshraghavpidathala3701 3 жыл бұрын

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 8 ай бұрын

Awesome video! How can I mock the error case?

@Nurtylek 3 жыл бұрын

great!

@adrianjason13 2 жыл бұрын

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

@SwashbucklingwithCode 2 жыл бұрын

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

@harel2021 3 жыл бұрын

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

@SwashbucklingwithCode 3 жыл бұрын

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.

@haralc 2 жыл бұрын

Thank you Jesus for this tutorial! 🤣

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

@el.vilchez183 Жыл бұрын

Thanks Jesus for teaching mocks :D

@PrieyudhaAkaditaS 2 жыл бұрын

Thankyou

@SwashbucklingwithCode 2 жыл бұрын

Thanks for stopping by. Best of fortune to ya.

@y_thedreamer95 Жыл бұрын

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

@SwashbucklingwithCode Жыл бұрын

Cartograph Mono CF.

@creative-commons-videos 2 жыл бұрын

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

@SwashbucklingwithCode 2 жыл бұрын

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.

@mahmoudnasser2158 2 жыл бұрын

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 2 жыл бұрын

e.g. mockimplementationonce

@mohammedamin6859 3 жыл бұрын

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

@SwashbucklingwithCode 3 жыл бұрын

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.

@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

@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 2 жыл бұрын

Thanks Jesus for this video! :)

@sauravthakur6261 8 ай бұрын

make a video on redis mock get set functions

@Emma-eb5zb 2 жыл бұрын

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

@SwashbucklingwithCode 2 жыл бұрын

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

@EulerAlvarenga1 2 жыл бұрын

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 2 жыл бұрын

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

@Chavez3d 2 жыл бұрын

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

@cla1814 3 жыл бұрын

you should post source code in the video description.

@SwashbucklingwithCode 3 жыл бұрын

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 3 жыл бұрын

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

@cla1814 3 жыл бұрын

@@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 5 ай бұрын

oh jesus

@elsetiyawan 11 ай бұрын

I feel like Jesus teach me testing.

@reasonforge9997 2 жыл бұрын

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

@SwashbucklingwithCode 2 жыл бұрын

I see what you did there.

@80Vikram Жыл бұрын

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

@erenyeager7465 11 ай бұрын

Jesus

@yashkaliapiano 10 ай бұрын

Jesus teaching software testing

@shadev23 Жыл бұрын

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

@hendra5604 3 жыл бұрын

First ☝🏻😅

@SwashbucklingwithCode 3 жыл бұрын

You are indeed.

@hendra5604 3 жыл бұрын

@@SwashbucklingwithCode What theme used there? Deep ocean?

@SwashbucklingwithCode 3 жыл бұрын

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

@hendra5604 3 жыл бұрын

@@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 2 ай бұрын

Jesus Christ

@jimlatsko4804 3 жыл бұрын

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 3 жыл бұрын

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 3 жыл бұрын

Have you already installed @types/jest ?

@jimlatsko4804 3 жыл бұрын

@@SwashbucklingwithCode yes.

@SwashbucklingwithCode 3 жыл бұрын

@@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 2 жыл бұрын

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