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.
Mock service worker: mswjs.io
Code Repo: github.com/stuyy/react-with-msw
GitHub: github.com/stuyy

[@keifer7813]

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

[@russelfernandes8483]

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

[@ansonthedev]

Glad you liked it!

[@user-po2iy4hq7v]

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

[@williamcao5139]

Welcome back Anson, thanks for your content

[@ansonthedev]

Thanks and you're welcome

[@jnaras]

Nice work Anson.

[@starBURST27]

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

[@caducoder]

Thanks bro, you really helped me with this tutorial!

[@ansonthedev]

You're welcome. :D

[@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.

[@ansonthedev]

Thank you for the clarification!

[@jasondhakhwa1179]

Thanks alot!!! This was a huje help dude

[@tinabhowal7376]

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.

[@alexsyzoniuk8335]

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

[@bariqdharmawan6604]

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?

[@ansonthedev]

Usually when you use Next.js' build-in API router, you're not using it for mocking but using it for running an actual business function to produce output as a response. When you run unit tests, assuming you are testing React components, you are testing them in a browser environment. So the test will render the component as if it was being done by ReactDOM, and then you'll perform some operation on the component under test, and assert some behavior. The test environment knows nothing about the Next.js server at all, it doesn't know what framework or libraries you're using. So even if your component calls the Next.js API, the component is not being rendered the same way Next.js does. Remember, Next.js runs on the server, and testing your component in the browser environment does not require the Next.js server to be running. Therefore the API calls will fail and that's why you need MSW to mock those API calls.

[@vitaliipolushkin834]

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

[@ansonthedev]

I have been wanting to but I am thinking of ideas at the moment that I want to pursue

[@loadingameplays]

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

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

[@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

[@sarathkumarsingaraju2939]

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

[@thaifred]

I dont really understand should i use setupServer or setupWorker? i use vitest with react testing lib, also if i have my baseUrl in a config.json how to mock that?

[@ansonthedev]

setupWorker is for the browser. Use it to mock API requests that you'd call from a component or inside a useEffect hook. setupServer is mainly if you need to write a unit test that needs the api endpoints mocked, so when the api call is made during the test, the mock server will be used to handle the request with your mocked response.

[@thaifred]

@@ansonthedev im using react query for fetching/state management , i tried both but get the problem [MSW] Warning: intercepted a request without a matching request handler: • GET /config/config.json i have the baseurl inside my config.json

[@Tita.n]

electron series someday?

[@chinmayghule8272]

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.

[@ansonthedev]

I'm glad you found this video helpful! That's great to hear. :)

[@sindhumathi9209]

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

[@ansonthedev]

You may need to manually override the response in the test file. Check this github issue: github.com/mswjs/msw/discussions/885

[@prashlovessamosa]

Can you please teach us Next14 stuff.