Let's use the "setupServer" API from Mock Service Worker to enable API mocking on the server-side of our Remix application. This way you can intercept and mock server-side requests, like those happening in the "loader" and "action" functions, as well as reuse the same setup for any other Node.js process, like integration tests with tools like Vitest or Jest in the future.
Instructor: [0:00] There are no service workers in Node.js, but we can use MSW there all the same. Let's create a new node module where we will set up MSW in Node.js. In the node module, import { setupServer } from 'msw/node'. Create a new server variable, and assign it the result of the setupServer function call.
[0:19] The setupServer function will return an object that we can use to start, stop, and control MSW in Node.js. Let's export the server object so we can reuse it in any Node.js process, such as our development server in Remix or integration tests with tools like Vitest or Jest.
[0:36] Similar to the setupWorker function, the setupServer expects request handlers. Let's import them from the same handlers module. By relying on the same list of handlers, we introduce a single source of truth for our network description and then utilize functions like setupServer and setupWorker to let MSW establish API mocking correctly in different environments for us.
[0:57] The Node.js setup is ready. All we'll have to do is start it. To do that, go to the server entry of our application. In Remix, that's an entry.server module. Import the server object from the Node.js integration we've just created. Then, call server.listen() to enable API mocking.
[1:19] Notice that this method is synchronous, and it will affect the current process as soon as it's called. Despite the name, the setupServer API does not create any actual servers, and instead, extends the standard Node.js APIs like HTTP to provision request interception.
[1:36] As the last thing, let's make sure that we enable API mocking only while in development by checking the node environment variable on the process and calling server.listen() conditionally.
Hi! Have you tried msw@latest? You shouldn't be using the fetch RC anymore, it's rather old. The latest MSW should work well with Remix. Let me know if it doesn't.
I have tried the latest msw, but @remix-run/server-runtime then fails and throws an error. I also tried to update to latest
"@remix-run/node": "^2.12.1",
"@remix-run/react": "^2.12.1",
"@remix-run/serve": "^2.12.1",
but that throws some other errors with Response
type.
Got it! Please, do you have a reproduction repo I can look at? I think I know what's going on.
Sure.
setupServer([]);
and call server.listen()
in entry.server.tsx
.But I don't think it's that critical for the tutorial purposes. It's possible to install latest msw, latest remix deps, replace Response
objects with HttpResponse
and run it normally.
I had issues running the remix dev server when I added
server.listen()
line. I couldn't solve it, so I just reinstalled msw with version0.0.0-fetch.rc-20
same as in the completed code. This fixed the server.npm install msw@0.0.0-fetch.rc-20