Mock Service Worker with React

Mock Service Worker is great for setting up a mock API for your front-end apps so you can continue developing without the need to stress over setting up the back-end just yet. It's also great for mocking API calls for unit tests with React Testing Library.

[keifer]

Damn, I was struggling until your video showed up on my search by the grace of God. Thanks man

[russelfernandes]

thanks Anson, excellent coverage of the topic: short, sweet and everything works. I wanted to re-learn two things today and now I have both (react-testing-library basics, msw)!

[williamcao]

Welcome back Anson, thanks for your content

[kettanaito]

Hey, Anson! Thanks for talking about MSW, that was a fantastic video!

My two cents about the "request.json()" confusion: MSW tries to help you out a bit and support strict request and response body types. In the context of request, you can provide a narrower request body type and only the "request.json()" method will respect it. But if you don't, the default request body type is everything that's possible to be sent in a JSON request: string, number, null, array, object, and undefined. I suppose TypeScript takes a look at that union of types and takes the lowest common denominator, that being a string type. That's why you get the string methods in autosuggestions—because TS doesn't know what exact thing the request body will have as its JSON (as JSON is not only objects!).


So that's why you didn't have to parse the returned json. It was an object on runtime. Modern IDEs are also tried to be helpful so you are getting intellisense even in JS files using the `.d.ts` types published by third-parties.

Hope this clarifies the behavior a bit.

[alexsyzoniuk]

9:12 How did you get that styling for methods documentation?

[역사시간_]

thank you so much.. i'm looked for 5 hours that genius like you... you are my angel :D 감사합니다.

[starBURST]

Very useful tutorial! Thanks
"msw init" is what i missed

[tinabhowal]

Thank you soo much! I guess .. after the migration from msw 1 - msw 2 and whenever we install msw, it installs version 2. and following the old tutorials landed me in a pool of errors and doubts.

[sarathkumarsingaraju]

Hi, How can we do decommission of MSW from our code.

[bsujeet]

Hi Anson,
How do we mock partial API's, If there are some API we want to actually go backend and some to mock msw worker.
Is there a way we can do that

[LeandroCorso]

Nice work! I have doubts about MSW in Next.JS. I'm trying to install it in a new instance of Next using typescript and app router, but when I write the handler file the lint highlight an error that msw doesn't exists, but it do! Someone know how to resolve it? thanks!

[caducoder]

Thanks bro, you really helped me with this tutorial!

[chinmayghule]

Your video is doing a better job at explaining this than the official docs. What I found repulsive is that there's an official course that's being recommended on the website on egg-something but it's behind a paywall. The documentation is absolutely not user friendly and a newbie developer (like me) is surely going to get a hard time understanding it. That's because there isn't a proper step by step guide, and the examples point to github repo which don't really help.

[loadingameplays]

whats yout vs code theme and can you make a video with nextjs?

[vallivalli]

same i was doing but i was facing with some errors

[sindhumathi]

Hey Anson, I am facing an issue while using MSW for http response, I am not able to write handlers for the same endpoint with different responses, for example. for Status Code 200 and 400 for same end point, the test is working for 200 and 400 is failing, How can I resolve this issue

[bariqdharmawan]

Thank you for your MSW topic Anson, it's a new thing for me as a Frontend! But I want to ask you something. When you use nextjs, it have an API Routes feature. Basically we could make an api with all the response, status code, etc. So i'm guessing it could be for mock api. What do you tought about the difference of that two things. MSW and Api Routes?

[jasondhakhwa]

Thanks alot!!!
This was a huje help dude

[vitaliipolushkin]

man, your streams last year were amazing, are you planning to do it in the future? building another app or smth?