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 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
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.
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 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.
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.
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.
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”?
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.
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.
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).
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
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 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.
@@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.
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'}});
@@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
This is by far the best video I've found explaining mocking Jest
Awesome, I'm glad to hear that.
This is the best video about mocking I have encountered, it really made me understand how it works. Big thanks to you sir!
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!
I prefer blogs over videos, thankyou for making one and very understandable.
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.
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
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 will personally hunt down anyone who downvotes this tutorial. Outstanding presentation.
Haha, ty.
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.
Great video...thanks for explaining jest mocks.
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.
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.
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.
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.
An excellent resource in my current journey in Unit testing
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 :)
Subscribed, liked, and alas commented. Beautifully explained!
Please continue to teach jest and react testing library
Great explanation
Very good explained 💡, thank you Jimmy!😊
Awesome.
@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.
Amazing 👏👏 Thank you so much 💕
Very Useful video. Nice explaining 👏Thank you. Please keep it up with testing videos, this is gold.
Thank you. You earned a subscriber at "Sanity check" . Awesome bro.
Thank you.
Thank you for this life saver video. This is great knowledge shared
Amazing tutorial, thanks for sharing your knowledge
Awesome video. Thank you very much.
Super interesting! Thx for the nice tutorial 🔥
Very interesting. Thanks a lot 🤩
Thanks for this content. (from India
)
"...test properly fails..." that line is hilarious and scary at the same time haha.
Great vid bruv. Make another about standard practices for mocking models and such
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.
Excelent.
Thank you so much.
Wow I was really struggling with this but got it to work thanks to your videos. Thank you js Jesus
Thank you!
Happy to help.
great tutorial! thanks a lot for that!
Good job!
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.
Nicely explained 👍
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 Jesus for this tutorial! 🤣
which font do you use at WSL? it looks awesome!
Cartograph Mono CF.
Thank you
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
Awesome video! How can I mock the error case?
Thanks Jesus for teaching mocks :D
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
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.
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.
Thanks a lot, I am about to ask jest and react testing library. Could you please teach promises with API not with settimeouut function
great!
make a video on redis mock get set functions
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).
So mock is to test it "fake" and then end to end for real test?
Thanks Jesus for this video! :)
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.
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.
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
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!
Jesus is real and he loves TDD. Thanks for saving developers' lives US Jesus
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.
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.
oh jesus
Jesus!
Jesus
Jesus teaching software testing
Jesus ???? It's you ???
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