Mocking Asynchronous Functions with Jest
Vložit
- čas přidán 27. 07. 2024
- 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
This is by far the best video I've found explaining mocking Jest
Awesome, I'm glad to hear that.
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.
I appreciate the feedback and knowing that the effort was useful. Cheers!
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!
Very Useful video. Nice explaining 👏Thank you. Please keep it up with testing videos, this is gold.
This is the best video about mocking I have encountered, it really made me understand how it works. Big thanks to you sir!
one of the simplest and well-explained clean video of jest mocking so far! thanks!
Thank you for the kind words. Always nice to hear that your efforts were appreciated.
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 :)
An excellent resource in my current journey in Unit testing
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!
I really appreciate the feedback.
Amazing tutorial, thanks for sharing your knowledge
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.
lovely
I prefer blogs over videos, thankyou for making one and very understandable.
Thank you! This was so useful to me. Gonna be watching some more of your Jest videos now. :)
happy it was useful. ty for letting me know.
Super interesting! Thx for the nice tutorial 🔥
Thank you so much, Jimmy! You're slowly demystifying testing JS code with Jest for me!
That's what I like to hear. Thank you for letting me know.
@@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
The way you teach is fantastic! And yes, this is the best video on the topic.👏👏 Thank you so much
I really appreciate that, thank you.
Very good explained 💡, thank you Jimmy!😊
Awesome.
We have struggled with axios mocking on a complex React/Typescript project having only recently up-skilled. Best explainer!
Thank you for the kind words and I'm happy to hear your skills are improving.
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!
Happy to have helped.
Thank you for this life saver video. This is great knowledge shared
Awesome video. Thank you very much.
Very interesting. Thanks a lot 🤩
great tutorial! thanks a lot for that!
Subscribed, liked, and alas commented. Beautifully explained!
Nicely explained 👍
Great vid bruv. Make another about standard practices for mocking models and such
Great explanation
Amazing 👏👏 Thank you so much 💕
this video is short and easy to understand, please make more videos for unit testing, it is helpful for a beginner like me. Thanks!
Glad it worked for you.
Excelent.
Thank you so much.
Needs to be more stuff of this quality on the net. Most explanations are too simplistic and are aimed at people with no experience.
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.
Good job!
I will personally hunt down anyone who downvotes this tutorial. Outstanding presentation.
Haha, ty.
Thank you. You earned a subscriber at "Sanity check" . Awesome bro.
Thank you.
Wow I was really struggling with this but got it to work thanks to your videos. Thank you js Jesus
Please continue to teach jest and react testing library
Sir big fan...CodeStackr named you in his video on monday and I am since then loving your content....
Thank you, I greatly appreciate that.
Thank you!
Happy to help.
Thanks a lot, I am about to ask jest and react testing library. Could you please teach promises with API not with settimeouut function
"...test properly fails..." that line is hilarious and scary at the same time haha.
Awesome video! How can I mock the error case?
Awesome content, can you please upload more videos on jest and react-testing-library
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.
Helpful content, thanks! What VSCode extension are you using for intellisense/autocompleting Jest code?
I believe that was shown in a previous video in this videos playlist, but it comes from installing @types/jest
great!
@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'.
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.
Not always a response have success but sometimes it throws an Error too, so how can we mock the errors and handle it ?
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.
Thankyou
Thanks for stopping by. Best of fortune to ya.
awesome stuff man, can you create react-centric testing tutorials?
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.
Thank you Jesus for this tutorial! 🤣
which font do you use at WSL? it looks awesome!
Cartograph Mono CF.
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”?
e.g. mockimplementationonce
make a video on redis mock get set functions
Thanks Jesus for teaching mocks :D
what if we have 2 get api calls in the react component. How to return different values for both
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.
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
Very informative, but it seems won't work in my case for no reason
How can I test a function that calls multiple other functions?
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).
Thanks Jesus for this video! :)
I'm using typescript. When I call the real api the test works but when I call the mockImplementation it always returns undefined =/
You should be resolving the returned promise to some value. By default, Promise.resolve() resolves to undefined.
you should post source code in the video description.
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.
Added this in the description, thanks for letting me know:
github.com/Jimmydalecleveland/jest-mock-async-example
@@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.
is lemmy kilmister your dad? also great video, sub'd!
I feel like Jesus teach me testing.
Lots of mocking in this video...but it's all in Jest.
I see what you did there.
oh jesus
Jesus ???? It's you ???
Jesus teaching software testing
Jesus is real and he loves TDD. Thanks for saving developers' lives US Jesus
Jesus
First ☝🏻😅
You are indeed.
@@SwashbucklingwithCode What theme used there? Deep ocean?
@@hendra5604 This is actually my own theme called Everset. marketplace.visualstudio.com/items?itemName=jimmydc.everset
@@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.
Jesus Christ
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 '.
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'}});
Have you already installed @types/jest ?
@@SwashbucklingwithCode yes.
@@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.
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