React Testing Library - Mock API Calls - Mock Service Worker (msw)

[@justindelarapa1551]

Thanks man, it was a very clear and direct to the point explanation. I've saved so much time researching with this video. Very Impressive!

[@techcheck3042]

Thank you! Glad it helped!

[@nareshy990]

Such an underrated video, the cleanest solution I have found after trying out multiple ways by referring to multiple blogs. Thanks and Cheers!!

[@techcheck3042]

Wow, thank you so much!! 🙏🙏

[@khawajaali444]

Best video on youtube about mock API. Thanks man

[@techcheck3042]

Wow, thanks so much! 🙏

[@akrammohammed3581]

Finally I found how exactly we need to mock the api's, There is lot of videos for creating react app but very few teaches how to test it, you nailed it Thanks a lot😊

[@techcheck3042]

Thanks so much! And thank you for watching! 🍻

[@akrammohammed3581]

Please make a blog how to add code coverage threshold for react app

[@poenaeco]

thanks for the vid, helped a lot.

[@techcheck3042]

@@poenaeco glad it helped! Thanks for the comment!

[@darmanyaman8234]

This is what i'm looking for. Thanks a lot bro :)

[@techcheck3042]

Awesome to hear! Thanks for watching!

[@DerekMontgomery]

Thanks so much for this! This just helped me complete a personal milestone for work, integration testing an API-/Redux-powered application.

[@techcheck3042]

That's so awesome to hear! You are very welcome and glad it helped!

[@mortezaahmadi5710]

Ty all so much for all effort for this great content!

[@techcheck3042]

Thanks for the awesome comment and thank you for watching! Glad it helped!

[@webblocksapp]

This video was a great timesaver. Thxs a lot for it!

[@techcheck3042]

Awesome to hear! Glad it helped!

[@yasal9957]

Hey man, just wanted to say I watched/read so much on this topic- great job explaining buddy!

[@techcheck3042]

Thank you! 🙏 And thank you for watching!

[@jogre900]

awesome dude thx!. Now i have a doubt, try this with pokemon api, i see a error on console, the call excep the timeout of 5000ms. any help?

[@techcheck3042]

What does the error say?

[@devathul]

Hi , this might be a silly question. but in test.js file when we render a component how it recognize that response should be getting from this mock setup ? say if in the component rendered , I have a condition like isLoading, isError , isSuccess and only when isSuccess is true we are returning something . what can I do to test this returned element by this kind of mocking

[@techcheck3042]

You would mock the api call and the response (mock a successful response in this case) in that handlers array. Then, in the test file, you'd write a test and test for the returned element. That part is more about implementing a test with React Testing Library. I have a video for that here: kzbin.info/www/bejne/gXPLeXl5Yr-ke6s Hope that helps!

[@devathul]

@@techcheck3042 oh yes ... Now I got it . So basically how this msw work is when the api call happens , MSW interceps that request and gives us whatever mock data we specified . So that we don't need to mention to get data from mock setup . Right?

[@khalidm5939]

Thanks man very helpful!

[@techcheck3042]

Glad to hear! Thanks for watching!

[@6av321]

Learned a lot. Thanks man.

[@techcheck3042]

Glad to hear it! Thanks for watching

[@6av321]

@@techcheck3042 Would there be a github repo or one of your blogs that I can see the source code? Thank you.

[@Human_Evolution-]

How much does MSW help? Seems like a somewhat complex thing to have to learn. I am scared.

[@techcheck3042]

Haha it's not that bad. Once it's setup, you can just slowly add to it as you make more API calls in your application 👍

[@Human_Evolution-]

@@techcheck3042 nice. I spent 3 hours trying to write a test today and just failed at every attempt. I spent the last week studying tests but can't seem to get anything to click. I'm like 30 hours in on 1 test file with no meaningful tests written.

[@techcheck3042]

@@Human_Evolution- ah, sorry to hear! I have definitely been there lol. Are you using React? I have a good starter video for testing with React Testing Library here: kzbin.info/www/bejne/gXPLeXl5Yr-ke6s and some other videos for if you have issues with Redux when testing. Hope that helps! I definitely had to go back and forth between videos and documentation before I started to get it

[@Human_Evolution-]

@@techcheck3042 Ah KZbin logic is deleting all my comments. I guess we are not allowed to paste code.

[@Human_Evolution-]

@@techcheck3042 I do not think we have to use a handlers dot js file. I just put 4 handlers/POST, GET, PUT, & DELETE in my service worker, and it works! I am all for using less files. But my web app is super super simple, so maybe handlers make sense with something more complicated.

[@elvinrajkumar477]

It was really a helpful video. We encourage you to make more videos. Thanks and GOOD LUCK.

[@techcheck3042]

Thanks so much! I certainly will!

[@amirrezaart]

Very useful👍

[@techcheck3042]

Glad to hear it! Thank you!

[@devmrin]

Thanks this is brilliant 🙌

[@techcheck3042]

Thank you! 🙏

[@lutallica83]

nice video ! very ckear explanation. I have one question though. When you simulate the API response in a GET request, what should I write if my API call returns a json response which is later converted to javascript? For example, "const response = await fetch(url + api_endpoint, {}; const result = await response.json; dispatch(fetchSuccess(result)); So my question is, what should go inside my ctx.json(), response or result ? this is for project and any help would be very appreciated!!!

[@techcheck3042]

ctx.json() returns json. You can also do ctx.body() or ctx.data(). If you typically have to convert it to json after you get your response back, I would assume you'll need ctx.body(). It depends on your particular response. You can also look at the documentation under API, then context. Hope this helps!

[@arturoalvarez2646]

@@techcheck3042 Thanks. Very helpful!

[@kirillpavlovskii8342]

If I have a log of endpoints like 50-60? It’s gonna be a big array

[@Krazness]

Consider splitting the endpoints into diff files, then importing them into the handlers.js

[@rodrigomoura2108]

The introduction looks like that is about to start one of that conspiracy videos huashuashuas

[@techcheck3042]

😂😂😂

[@Human_Evolution-]

Love the Dumb & Dumber clips. I'm too lazy to Google right now, so, what is ctx?

[@bogdanradoi1963]

Good tutorial, thank you. Helped me. You should specify somewhere where the ../test-utils comes from (maybe provide a link to your other tutorial where you implement this). I found it after some searching. :)

[@techcheck3042]

Ah, good point. Thanks for watching! Glad it helped :)

[@amazinginterestingstuff9413]

i keep getting: Unexpected reserved word 'await'. (114:11) Any ideas?

[@techcheck3042]

Await is a keyword that is paired with async. Did you use the async keyword to declare the function as async? const fetch = async () => { await result = response.data ... }

[@amazinginterestingstuff9413]

@@techcheck3042 hehe yes got it now, just an hour ago! on to new issues now :)

[@techcheck3042]

@@amazinginterestingstuff9413 Haha such is coding 😂. Glad you got it!

[@jeanpablo1031]

if I want to make a request to '${baseURL}/something?someParam=x' it gives me an error. How do I make requests with queryParams?

[@6basculante]

How to mock with firebase?

[@techcheck3042]

It would be the same setup. Whatever api/url you use to reach out to firebase, you would put that in the msw handlers: rest.get("firebase.backend.com/data", (req, res, ctx) => { return res(ctx.match response here) }

[@PramodKHARADE-yj7bf]

Hi @Andrew, content is good and worth to watch as beginners . Could you please create videos for React toolkits api custom hook unit testing example.

[@techcheck3042]

Thanks! I will add that to the list!