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

A tutorial on how to mock API calls with Mock Service Worker (msw) for writing tests. I'm using React Testing Library along with Jest. I have a video on how to get started with those, here:

React Testing Library - Crash Course

Hope it helps!

Feel free to say hi 👋:

Thanks for watching!

-Andrew

Affiliate links to some of my gear 🤘🙏❤️
(Best quality for the best price from my research)

[justindelarapa]

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!

[nareshy]

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

[khawajaali]

Best video on youtube about mock API. Thanks man

[akrammohammed]

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😊

[darmanyaman]

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

[webblocksapp]

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

[mortezaahmadi]

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

[DerekMontgomery]

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

[yasal]

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

[elvinrajkumar]

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

[bogdanradoi]

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

[rodrigomoura]

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

[Human_Evolution-]

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

[PramodKHARADE-yjbf]

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.

[jogre]

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?

[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

[lutallica]

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;


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

[jeanpablo]

if I want to make a request to it gives me an error. How do I make requests with queryParams?

[Human_Evolution-]

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

[kirillpavlovskii]

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