Using MSW for mocking in application rather than in tests

[aderchox]

Hi, I'm trying to use MSW for a simple use case, to mock some API calls in my Create-React-App application and not in tests. Just like what json-server does. According to this article it must be possible. But when I try it, it doesn't work as I expect. So maybe my expectation is wrong? What I do is I've followed the steps of the Getting-Started guide on your website taking the REST and the Browser path and doing all the instructions. Now I have this in my index.js:

if (process.env.NODE_ENV === "development") {
  const { worker } = require("./mocks/browser");
  worker.start();
}

and a rest.get('/temp', handler) in handlers array in handlers.js. Now, when I open this react app in the browser and head to http://localhost:3000/temp, although I see the message [MSW] Mocking enabled. in the console, I don't see the response (which is a json object).

I'm an absolute beginner with service workers and MSW so I cannot debug it, but is what I'm trying to do here possible at all with MSW? If yes, can you tell me where I've done wrong?
The response is returned like this at the end of the handler function:

return res(ctx.status(200), ctx.json(temp_obj));

[aderchox]

P.S. It seems that Yes! It's possible, because here's a "working" example of it: grocery list. However, I don't understand something. It makes get requests to http://localhost:3001/grocery-list and it gets the list of groceries in the response, however, when I make the same GET request by visiting the same address, I don't get the list in response. So I think I don't understand what "mocking" here really does exactly. Maybe it's because unless I visit my react app on port 3000, the mocking will not happen and so visiting the http://localhost:3001/grocery-list directly, won't work?

[aderchox]

Initially when I wrote this question I had some mistakes, but here's what I've done now and I expect it to work, but it still doesn't. I'd be glad if someone can take a look and help: codesandbox.

[aderchox]

No problem anymore, it works locally.

[kettanaito]

Hey, @aderchox. I'm glad you've resolved it!
Could you please post some of the mistakes you've had in this discussion? I know that'd help others if they experience similar obstacles as you. Thanks!

[aderchox]

@kettanaito Sure, yes, I'd be happy if it helps 🙂. Here are the mistakes I had:
(Disclaimer: I'm new to React as well, ~1month experience. So please correct me where you see I'm still wrong, haha)

1. I knew MSW was completely different from json-server, but I still somehow expected a behavior like json-server due to my lack of experience with either MSW or service workers in general. So what I did was, I took the steps on MSW's Getting Started guide, and then used my browser's address bar to make a GET request, however, it doesn't work because I guess React will steal all requests made to the localhost:3000 and will discard the extra parts. Well... unless something like React Router is used! But even if you're using React Router, then you will have to open a path to the address you specified in your MSW handler, which is most probably NOT what you want (i.e., you don't want to change your routing logic for mocking the API). So the easier thing you can do is, just use another port number! I used port number 3001.

2. Now should you be able to enter http://localhost:3001/temp_url in browser's address bar to get back the response from MSW? No. Because MSW is part of your React code, remember starting the worker in the index.js? So if you don't go to http://localhost:3000 in the first place, you will not start MSW at all to get a response! So in short, you can't get to it directly using address bar. Instead, assuming you've loaded it correctly, you can first open http://localhost:3000 and then open up the console in browser's dev tools and make a request this way: fetch("/temp_url").then(resp => resp.json()).then(json=>console.log(json)); and now you'll see your GET REST handler working fine. A service worker is a script that is run by the browser independent of your website. It's important to understand that MSW does not run a server, it's just that you can enable it through your own code and then when that script is running, it will cause interception of the requests you'll make in your code to the addresses defined for your handlers. You can check the request made in the Network tab in the browser's dev tools to see the interception yourself, e.g., in the Headers of the request, you will see this: Status Code: 200 OK (from service worker). Also you can check Application --> Service Workers in browser's dev tools to see whether MSW's script is running at all.

3. Another really really silly mistake I made, a basic embarrassing JavaScript mistake, was doing this:

fetch("/temp_url").then(resp => console.log(resp.json()))

and I saw a promise logged in the console. The resp.json() gives a promise too. So I needed another .then() added to the chain to receive the final resolved promise data.

4. MSW doesn't work on codesandbox.io for some reasons I don't know. Probably because of their security they don't allow scripts? But I didn't care at all anyway, because I made it work on my own local machine which was my actual goal. I made the sandbox only to be able to ask questions.

[kettanaito]

Thank you for writing those points! If you don't mind, I can share some insights related to them below.

1. You are correct saying MSW is quite different from JSON Server. JSON Server would spawn an actual HTTP server locally, while MSW lives in your browser, next to your app. That's why you can't hit endpoints mocked by MSW directly (i.e. via the address bar or by curl) because those requests would happen outside of the worker's scope.

2. This one is actually related to the first one as well. React doesn't really steal any requests, it's just that opening an endpoint in your address bar makes a GET request to that endpoint. The thing is that it's the browser that makes that request, not your app where the worker is controlling the network. If you request that endpoint from within your app, like via fetch('http://localhost:3000/temp_url') it would work as you expect.

3. A good catch 😉

4. Running workers on CodeSandbox requires additional setup. Luckily, we've got you covered. You can use our CodeSandbox template where we have both worker and setupServer configured so you can try to reproduce issues in both browser and Node.js respectively.

Note that in some cases you do want to establish a local server like JSON Server does (if you're unsure whether you need this—you don't). You can do that with MSW as well by using a standalone package @mswjs/http-middleware.

[aderchox]

The last two points are really interesting and useful, I'll look into them! Thanks for correcting me on "the stealing illusion" :) and for all the valuable insights.